Sidebar
Displays a sidebar to navigate inside the application
<dui-sidebar-wrapper>
<dui-sidebar>
<dui-sidebar-header>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<dui-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-label>Platform</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
@* Active item — points back at this page so it resolves as the active route. *@
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="layout-dashboard"/>
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="ticket"/>
<span>Bookings</span>
</dui-sidebar-menu-link>
<dui-sidebar-menu-badge>12</dui-sidebar-menu-badge>
</dui-sidebar-menu-item>
@* Menu item with a nested sub-menu. *@
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="map-pinned"/>
<span>Destinations</span>
</dui-sidebar-menu-link>
<dui-sidebar-menu-sub>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Europe</span>
</dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Asia Pacific</span>
</dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>The Americas</span>
</dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
</dui-sidebar-menu-sub>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="users"/>
<span>Customers</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
<dui-sidebar-group>
<dui-sidebar-group-label>Operations</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="plane-takeoff"/>
<span>Flights</span>
</dui-sidebar-menu-link>
<dui-sidebar-menu-badge>3</dui-sidebar-menu-badge>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="hotel"/>
<span>Hotels</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="calendar-days"/>
<span>Itineraries</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
<dui-sidebar-separator/>
<dui-sidebar-group>
<dui-sidebar-group-label>Insights</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="chart-line"/>
<span>Reports</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="file-text"/>
<span>Invoices</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
<dui-sidebar-footer>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<dui-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
<dui-icon name="chevrons-up-down" class="ml-auto"/>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-footer>
</dui-sidebar>
<dui-sidebar-inset>
<header class="flex h-14 items-center gap-2 border-b px-4">
<dui-sidebar-trigger></dui-sidebar-trigger>
<dui-separator orientation="SeparatorOrientation.Vertical" class="mx-1 h-4"/>
<span class="text-sm font-medium">Dashboard</span>
</header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
A full-featured sidebar — header, grouped navigation with labels, an active
item, badges, a nested sub-menu, a separator, and a user footer. Toggle it
with the trigger (Ctrl/⌘ + B).
</p>
</div>
</dui-sidebar-inset>
</dui-sidebar-wrapper>Usage
Wrap the sidebar and your page content in a dui-sidebar-wrapper. The dui-sidebar holds the navigation — composed of dui-sidebar-header, dui-sidebar-content and dui-sidebar-footer — while dui-sidebar-inset holds the main page content. Navigation is built up from dui-sidebar-group, dui-sidebar-menu, dui-sidebar-menu-item and dui-sidebar-menu-link. Use dui-sidebar-trigger to toggle the sidebar.
<dui-sidebar-wrapper>
<dui-sidebar>
<dui-sidebar-header>
...
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-label>Platform</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="...">
<dui-icon name="layout-dashboard" />
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
<dui-sidebar-footer>
...
</dui-sidebar-footer>
</dui-sidebar>
<dui-sidebar-inset>
<dui-sidebar-trigger />
<!-- Main page content -->
</dui-sidebar-inset>
</dui-sidebar-wrapper>Examples
Inset variant
Set variant="SidebarVariant.Inset" to render the main content as a floating, rounded card inset from the edges of the screen.
<dui-sidebar-wrapper>
<dui-sidebar variant="SidebarVariant.Inset">
<dui-sidebar-header>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<dui-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-label>Platform</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="layout-dashboard"/>
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="ticket"/>
<span>Bookings</span>
</dui-sidebar-menu-link>
<dui-sidebar-menu-badge>12</dui-sidebar-menu-badge>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="map-pinned"/>
<span>Destinations</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="users"/>
<span>Customers</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
<dui-sidebar-footer>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<dui-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
<dui-icon name="chevrons-up-down" class="ml-auto"/>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-footer>
</dui-sidebar>
<dui-sidebar-inset>
<header class="flex h-14 items-center gap-2 border-b px-4">
<dui-sidebar-trigger></dui-sidebar-trigger>
<dui-separator orientation="SeparatorOrientation.Vertical" class="mx-1 h-4"/>
<span class="text-sm font-medium">Dashboard</span>
</header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
The <code class="font-mono">inset</code> variant renders the main content as a
rounded, floating card with the sidebar tucked alongside it.
</p>
</div>
</dui-sidebar-inset>
</dui-sidebar-wrapper>Floating variant
Set variant="SidebarVariant.Floating" to detach the sidebar from the edge of the screen and render it as a floating panel.
<dui-sidebar-wrapper>
<dui-sidebar variant="SidebarVariant.Floating">
<dui-sidebar-header>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<dui-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-label>Platform</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="layout-dashboard"/>
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="ticket"/>
<span>Bookings</span>
</dui-sidebar-menu-link>
<dui-sidebar-menu-badge>12</dui-sidebar-menu-badge>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="map-pinned"/>
<span>Destinations</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="users"/>
<span>Customers</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
<dui-sidebar-footer>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<dui-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
<dui-icon name="chevrons-up-down" class="ml-auto"/>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-footer>
</dui-sidebar>
<dui-sidebar-inset>
<header class="flex h-14 items-center gap-2 border-b px-4">
<dui-sidebar-trigger></dui-sidebar-trigger>
<dui-separator orientation="SeparatorOrientation.Vertical" class="mx-1 h-4"/>
<span class="text-sm font-medium">Dashboard</span>
</header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
The <code class="font-mono">floating</code> variant detaches the sidebar into a
rounded panel with its own border and shadow.
</p>
</div>
</dui-sidebar-inset>
</dui-sidebar-wrapper>Alternate trigger icon
Provide child content to dui-sidebar-trigger to override the default icon. Use the in-aria-expanded and not-in-aria-expanded variants to swap the icon based on whether the sidebar is open or closed.
<dui-sidebar-wrapper>
<dui-sidebar>
<dui-sidebar-header>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<dui-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="layout-dashboard"/>
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="ticket"/>
<span>Bookings</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="map-pinned"/>
<span>Destinations</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
</dui-sidebar>
<dui-sidebar-inset>
<header class="flex h-14 items-center gap-2 border-b px-4">
@* The trigger renders a <button> carrying aria-expanded. Supplying our own
child content overrides the default panel-left icon. *@
<dui-sidebar-trigger>
<dui-icon name="panel-left-close" class="not-in-aria-expanded:hidden"/>
<dui-icon name="panel-left-open" class="in-aria-expanded:hidden"/>
</dui-sidebar-trigger>
<span class="text-sm text-muted-foreground">The trigger icon swaps with the sidebar state</span>
</header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
Toggle the sidebar and watch the trigger icon change between
<code class="font-mono">panel-left-close</code> and
<code class="font-mono">panel-left-open</code>.
</p>
</div>
</dui-sidebar-inset>
</dui-sidebar-wrapper>Right side
Set side="SidebarSide.Right" to anchor the sidebar to the right edge of the screen.
<dui-sidebar-wrapper>
<dui-sidebar side="SidebarSide.Right">
<dui-sidebar-header>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<dui-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-label>Platform</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="layout-dashboard"/>
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="ticket"/>
<span>Bookings</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="map-pinned"/>
<span>Destinations</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="users"/>
<span>Customers</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
</dui-sidebar>
<dui-sidebar-inset>
<header class="flex h-14 items-center gap-2 border-b px-4">
<span class="text-sm font-medium">Dashboard</span>
<dui-sidebar-trigger class="ml-auto"></dui-sidebar-trigger>
</header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
This sidebar is anchored to the right with <code class="font-mono">side="SidebarSide.Right"</code>,
so the trigger sits at the end of the header.
</p>
</div>
</dui-sidebar-inset>
</dui-sidebar-wrapper>Collapsible to icons
Set collapsible="SidebarCollapsible.Icon" to collapse the sidebar down to icons only, instead of hiding it entirely.
<dui-sidebar-wrapper>
<dui-sidebar collapsible="SidebarCollapsible.Icon">
<dui-sidebar-header>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<dui-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-label>Platform</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="layout-dashboard"/>
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="ticket"/>
<span>Bookings</span>
</dui-sidebar-menu-link>
<dui-sidebar-menu-badge>12</dui-sidebar-menu-badge>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="map-pinned"/>
<span>Destinations</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="plane-takeoff"/>
<span>Flights</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="hotel"/>
<span>Hotels</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="settings"/>
<span>Settings</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
</dui-sidebar>
<dui-sidebar-inset>
<header class="flex h-14 items-center gap-2 border-b px-4">
<dui-sidebar-trigger></dui-sidebar-trigger>
<span class="text-sm text-muted-foreground">Toggle to collapse the sidebar to icons</span>
</header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
With <code class="font-mono">collapsible="SidebarCollapsible.Icon"</code> the sidebar
shrinks to a narrow rail of icons instead of sliding off-canvas.
</p>
</div>
</dui-sidebar-inset>
</dui-sidebar-wrapper>Collapsible groups
Wrap a dui-sidebar-group in a dui-collapsible to let an entire section of the sidebar collapse and expand together.
<dui-sidebar-wrapper>
<dui-sidebar>
<dui-sidebar-header>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<dui-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<button type="button" command="--toggle" commandfor="group-platform" class="block w-full">
<dui-sidebar-group-label class="cursor-pointer hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<span>Platform</span>
<dui-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<dui-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</dui-sidebar-group-label>
</button>
<dui-collapsible id="group-platform" class="block">
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="layout-dashboard"/>
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="ticket"/>
<span>Bookings</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="map-pinned"/>
<span>Destinations</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="users"/>
<span>Customers</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-collapsible>
</dui-sidebar-group>
<dui-sidebar-group>
<button type="button" command="--toggle" commandfor="group-resources" class="block w-full">
<dui-sidebar-group-label class="cursor-pointer hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<span>Resources</span>
<dui-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<dui-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</dui-sidebar-group-label>
</button>
<dui-collapsible id="group-resources" hidden="" class="block">
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="book-open"/>
<span>Documentation</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="life-buoy"/>
<span>Support</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="sparkles"/>
<span>Changelog</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-collapsible>
</dui-sidebar-group>
</dui-sidebar-content>
<dui-sidebar-footer>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<dui-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@@voyager.travel</span>
</div>
<dui-icon name="chevrons-up-down" class="ml-auto"/>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-footer>
</dui-sidebar>
<dui-sidebar-inset>
<header class="flex h-14 items-center gap-2 border-b px-4">
<dui-sidebar-trigger></dui-sidebar-trigger>
<dui-separator orientation="SeparatorOrientation.Vertical" class="mx-1 h-4"/>
<span class="text-sm font-medium">Dashboard</span>
</header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
Whole sidebar groups collapse here. Each <code class="font-mono">dui-sidebar-group-label</code>
is wrapped in a <code class="font-mono"><button></code> that toggles a
<code class="font-mono">dui-collapsible</code> around the group's
<code class="font-mono">dui-sidebar-group-content</code> via the Invoker Commands API.
<strong>Platform</strong> starts open and <strong>Resources</strong> starts collapsed;
the chevron flips with the group's <code class="font-mono">aria-expanded</code> state.
</p>
</div>
</dui-sidebar-inset>
</dui-sidebar-wrapper>Collapsible items
Use dui-sidebar-menu-button together with dui-collapsible to create a menu item that expands to reveal nested sub-items.
<dui-sidebar-wrapper>
<dui-sidebar>
<dui-sidebar-header>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<dui-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-header>
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-label>Platform</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="layout-dashboard"/>
<span>Dashboard</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-button command="--toggle" commandfor="nav-bookings">
<dui-icon name="ticket"/>
<span>Bookings</span>
<dui-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<dui-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</dui-sidebar-menu-button>
<dui-collapsible id="nav-bookings" class="block">
<dui-sidebar-menu-sub>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Upcoming</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Past</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Cancelled</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
</dui-sidebar-menu-sub>
</dui-collapsible>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-button command="--toggle" commandfor="nav-destinations">
<dui-icon name="map-pinned"/>
<span>Destinations</span>
<dui-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<dui-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</dui-sidebar-menu-button>
<dui-collapsible id="nav-destinations" hidden="" class="block">
<dui-sidebar-menu-sub>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-button command="--toggle" commandfor="nav-europe">
<span>Europe</span>
<dui-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<dui-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</dui-sidebar-menu-sub-button>
<dui-collapsible id="nav-europe" hidden="" class="block">
<dui-sidebar-menu-sub>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>France</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Italy</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Spain</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
</dui-sidebar-menu-sub>
</dui-collapsible>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Asia Pacific</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>The Americas</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
</dui-sidebar-menu-sub>
</dui-collapsible>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
<dui-sidebar-group>
<dui-sidebar-group-label>Operations</dui-sidebar-group-label>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-button command="--toggle" commandfor="nav-logistics">
<dui-icon name="route"/>
<span>Logistics</span>
<dui-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<dui-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</dui-sidebar-menu-button>
<dui-collapsible id="nav-logistics" hidden="" class="block">
<dui-sidebar-menu-sub>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Flights</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Hotels</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-item>
<dui-sidebar-menu-sub-link href="#"><span>Itineraries</span></dui-sidebar-menu-sub-link>
</dui-sidebar-menu-sub-item>
</dui-sidebar-menu-sub>
</dui-collapsible>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
<dui-sidebar-footer>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<dui-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@@voyager.travel</span>
</div>
<dui-icon name="chevrons-up-down" class="ml-auto"/>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-footer>
</dui-sidebar>
<dui-sidebar-inset>
<header class="flex h-14 items-center gap-2 border-b px-4">
<dui-sidebar-trigger></dui-sidebar-trigger>
<dui-separator orientation="SeparatorOrientation.Vertical" class="mx-1 h-4"/>
<span class="text-sm font-medium">Dashboard</span>
</header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
The <strong>Bookings</strong>, <strong>Destinations</strong> and
<strong>Logistics</strong> menu items are collapsible items built with
<code class="font-mono">dui-sidebar-menu-button</code>, and
<strong>Destinations → Europe</strong> nests a second level with
<code class="font-mono">dui-sidebar-menu-sub-button</code>. Each button toggles a
<code class="font-mono">dui-collapsible</code> via the Invoker Commands API; the
chevron flips with the button's <code class="font-mono">aria-expanded</code> state.
</p>
</div>
</dui-sidebar-inset>
</dui-sidebar-wrapper>Sidebar in a dialog
Set collapsible="SidebarCollapsible.None" to render a sidebar inside a dui-dialog, for example as part of a settings screen.
<div class="flex justify-center">
<dui-button variant="ButtonVariant.Outline" commandfor="dialog-settings" command="show-modal">
Open settings
</dui-button>
</div>
@* A native <dialog> defaults to fit-content width, and dui-dialog's default classes
cap it at `sm:max-w-sm`. So give it an explicit responsive width (760px, shrinking on
narrow viewports) and clear that cap with `sm:max-w-none`. *@
<dui-dialog id="dialog-settings" class="w-[min(760px,100vw_-_2rem)] overflow-hidden p-0 sm:max-w-none">
<dui-dialog-title class="sr-only">Settings</dui-dialog-title>
<dui-dialog-description class="sr-only">Customize your settings here.</dui-dialog-description>
<dui-sidebar-wrapper class="min-h-0 items-start">
@* `collapsible="None"` renders a static, in-flow sidebar (no toggle, no
off-canvas drawer) — the variant suited to embedding. *@
<dui-sidebar collapsible="SidebarCollapsible.None" class="flex h-[480px] w-48">
<dui-sidebar-content>
<dui-sidebar-group>
<dui-sidebar-group-content>
<dui-sidebar-menu>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="bell"/>
<span>Notifications</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="navigation"/>
<span>Navigation</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="paintbrush"/>
<span>Appearance</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
@* Manually marked active for the demo. *@
<dui-sidebar-menu-link href="#" data-active>
<dui-icon name="message-circle"/>
<span>Messages & media</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="globe"/>
<span>Language & region</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
<dui-sidebar-menu-item>
<dui-sidebar-menu-link href="#">
<dui-icon name="accessibility"/>
<span>Accessibility</span>
</dui-sidebar-menu-link>
</dui-sidebar-menu-item>
</dui-sidebar-menu>
</dui-sidebar-group-content>
</dui-sidebar-group>
</dui-sidebar-content>
</dui-sidebar>
<main class="flex h-[480px] flex-1 flex-col overflow-hidden">
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<span class="text-base font-medium">Messages & media</span>
</header>
<div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
<p class="text-sm text-muted-foreground">
A static <code class="font-mono">collapsible="None"</code> sidebar lives inside the
dialog. The list below scrolls independently of the sidebar.
</p>
<div class="aspect-video max-w-3xl rounded-lg bg-muted"></div>
<div class="aspect-video max-w-3xl rounded-lg bg-muted"></div>
<div class="aspect-video max-w-3xl rounded-lg bg-muted"></div>
<div class="aspect-video max-w-3xl rounded-lg bg-muted"></div>
</div>
</main>
</dui-sidebar-wrapper>
</dui-dialog>