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-dropdown-menu id="nav-user-menu">
<dui-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<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-button>
<dui-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<dui-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<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>
</div>
</dui-dropdown-menu-label>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-group>
<dui-dropdown-menu-item>
<dui-icon name="badge-check"/>
Account
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="credit-card"/>
Billing
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="bell"/>
Notifications
</dui-dropdown-menu-item>
</dui-dropdown-menu-group>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<dui-icon name="log-out"/>
Log out
</dui-dropdown-menu-item>
</dui-dropdown-menu-content>
</dui-dropdown-menu>
</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-dropdown-menu id="nav-user-menu">
<dui-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<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-button>
<dui-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<dui-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<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>
</div>
</dui-dropdown-menu-label>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-group>
<dui-dropdown-menu-item>
<dui-icon name="badge-check"/>
Account
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="credit-card"/>
Billing
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="bell"/>
Notifications
</dui-dropdown-menu-item>
</dui-dropdown-menu-group>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<dui-icon name="log-out"/>
Log out
</dui-dropdown-menu-item>
</dui-dropdown-menu-content>
</dui-dropdown-menu>
</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-dropdown-menu id="nav-user-menu">
<dui-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<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-button>
<dui-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<dui-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<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>
</div>
</dui-dropdown-menu-label>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-group>
<dui-dropdown-menu-item>
<dui-icon name="badge-check"/>
Account
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="credit-card"/>
Billing
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="bell"/>
Notifications
</dui-dropdown-menu-item>
</dui-dropdown-menu-group>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<dui-icon name="log-out"/>
Log out
</dui-dropdown-menu-item>
</dui-dropdown-menu-content>
</dui-dropdown-menu>
</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-dropdown-menu id="nav-user-menu">
<dui-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<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-button>
<dui-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<dui-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<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>
</div>
</dui-dropdown-menu-label>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-group>
<dui-dropdown-menu-item>
<dui-icon name="badge-check"/>
Account
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="credit-card"/>
Billing
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="bell"/>
Notifications
</dui-dropdown-menu-item>
</dui-dropdown-menu-group>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<dui-icon name="log-out"/>
Log out
</dui-dropdown-menu-item>
</dui-dropdown-menu-content>
</dui-dropdown-menu>
</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-dropdown-menu id="nav-user-menu">
<dui-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<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-button>
<dui-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<dui-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<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>
</div>
</dui-dropdown-menu-label>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-group>
<dui-dropdown-menu-item>
<dui-icon name="badge-check"/>
Account
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="credit-card"/>
Billing
</dui-dropdown-menu-item>
<dui-dropdown-menu-item>
<dui-icon name="bell"/>
Notifications
</dui-dropdown-menu-item>
</dui-dropdown-menu-group>
<dui-dropdown-menu-separator/>
<dui-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<dui-icon name="log-out"/>
Log out
</dui-dropdown-menu-item>
</dui-dropdown-menu-content>
</dui-dropdown-menu>
</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>API Reference
<dui-sidebar-wrapper>
The <dui-sidebar-wrapper> tag helper renders a <del-sidebar> web component
that wraps the sidebar and page content and owns the open/collapsed state.
Nested <dui-sidebar-trigger> elements toggle it through the Invoker Commands
API; it honours a user-supplied id and generates one otherwise. It forwards
any standard global
attributes
to the rendered element.
<dui-sidebar>
The <dui-sidebar> tag helper renders the sidebar panel itself as a <div>
(including the mobile drawer and its backdrop). It forwards any standard
global
attributes
to the rendered element.
Prop
Type
<dui-sidebar-trigger>
The <dui-sidebar-trigger> tag helper renders a <button> that toggles the
sidebar via the Invoker Commands API (command="--toggle-sidebar" targeting
the wrapper). It shows a default panel icon unless you supply child content,
and forwards any standard <button>
attributes
to the rendered element.
<dui-sidebar-header>
The <dui-sidebar-header> tag helper renders a <div> for content pinned to
the top of the sidebar. It has no attributes of its own.
<dui-sidebar-content>
The <dui-sidebar-content> tag helper renders a <div> holding the scrollable
body of the sidebar. It has no attributes of its own.
<dui-sidebar-footer>
The <dui-sidebar-footer> tag helper renders a <div> for content pinned to
the bottom of the sidebar. It has no attributes of its own.
<dui-sidebar-inset>
The <dui-sidebar-inset> tag helper renders a <main> element holding the
page content next to the sidebar. It has no attributes of its own.
<dui-sidebar-separator>
The <dui-sidebar-separator> tag helper renders a horizontal <div role="separator"> inside the sidebar. It has no attributes of its own.
<dui-sidebar-group>
The <dui-sidebar-group> tag helper renders a <div> for a section of the
sidebar. It has no attributes of its own.
<dui-sidebar-group-label>
The <dui-sidebar-group-label> tag helper renders a <div> heading for a
group. It has no attributes of its own.
<dui-sidebar-group-content>
The <dui-sidebar-group-content> tag helper renders a <div> holding a
group's content. It has no attributes of its own.
<dui-sidebar-menu>
The <dui-sidebar-menu> tag helper renders a <ul> containing menu items. It
has no attributes of its own.
<dui-sidebar-menu-item>
The <dui-sidebar-menu-item> tag helper renders an <li> for a single menu
entry. It has no attributes of its own.
<dui-sidebar-menu-button>
The <dui-sidebar-menu-button> tag helper renders a <button> styled as a
menu entry — typically paired with <dui-collapsible> for expandable items. In
addition to the attributes below, it forwards any standard <button>
attributes
to the rendered element.
Prop
Type
<dui-sidebar-menu-link>
The <dui-sidebar-menu-link> tag helper renders an
<a>
element styled as a menu entry. It is marked active automatically when its
routing attributes match the current route.
Prop
Type
Routing attributes
The menu link also accepts the same routing attributes as the ASP.NET Core
Anchor Tag
Helper
for generating the href. Supply either an href or these attributes — not
both.
Prop
Type
<dui-sidebar-menu-badge>
The <dui-sidebar-menu-badge> tag helper renders a <div> badge (such as a
count) alongside a menu entry. It has no attributes of its own.
<dui-sidebar-menu-sub>
The <dui-sidebar-menu-sub> tag helper renders a <ul> containing nested
sub-items. It has no attributes of its own.
<dui-sidebar-menu-sub-item>
The <dui-sidebar-menu-sub-item> tag helper renders an <li> for a single
sub-entry. It has no attributes of its own.
<dui-sidebar-menu-sub-button>
The <dui-sidebar-menu-sub-button> tag helper renders a <button> styled as a
sub-entry. In addition to the attributes below, it forwards any standard
<button>
attributes
to the rendered element.
Prop
Type
<dui-sidebar-menu-sub-link>
The <dui-sidebar-menu-sub-link> tag helper renders an
<a>
element styled as a sub-entry, marked active automatically when its route
matches. It accepts the same routing attributes as <dui-sidebar-menu-link>
above.
Prop
Type