Interactive playground

Configure every input and watch the component update live. The generated template stays in sync as you tweak.

A data-driven navigation built from a sample item tree (Dashboard, Projects, Settings). Switch orientation to vertical and try the accordion / flyout / panel expand modes.

orientationOrientation

verticalExpandModeVertical expand modeOnly applies when orientation is "vertical".

dropdownTriggerDropdown trigger

dropdownRenderModeDropdown render modeUse "overlay" to render submenus in a body-level overlay and avoid clipping.

positionPosition

collapseModeCollapse mode

collapseBreakpointCollapse breakpoint (px)Viewport width below which the nav collapses. Set 0 to disable responsive collapsing.

sidebarSideSidebar sideSide the sidebar sits on; panels extend toward the opposite edge.

panelWidthPanel widthWidth of each panel in panel expand mode.

panelMaxVisibleMax visible panelsBeyond this count the last panel drills down with back navigation.

Generated template