---
url: "https://vueda.dev/v3/reference/theming/keys/family/navigation.md"
title: "navigation keys"
---

# navigation keys

Source file: `client/lib/theme/vueda-tailwind/navigation/index.js`

## Breadcrumb

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [Breadcrumb](/v3/reference/theming/keys/Breadcrumb.md) | key | 1 | Root context only. The trail's visible layout lives on [BreadcrumbList.root](/v3/reference/theming/keys/BreadcrumbList.md#theme-key-BreadcrumbList-root). |
| [BreadcrumbList](/v3/reference/theming/keys/BreadcrumbList.md) | key | 1 | Inline wrapping row for breadcrumb items. |
| [BreadcrumbItem](/v3/reference/theming/keys/BreadcrumbItem.md) | key | 1 | One breadcrumb step plus its separator affordance, sized as an inline cluster. |
| [BreadcrumbLink](/v3/reference/theming/keys/BreadcrumbLink.md) | key | 1 | Navigable trail step. Hover and focus move toward foreground without changing weight. |
| [BreadcrumbPage](/v3/reference/theming/keys/BreadcrumbPage.md) | key | 1 | Current-page trail step. Uses foreground colour, not heavier type, so the trail still reads as one line. |
| [BreadcrumbSeparator](/v3/reference/theming/keys/BreadcrumbSeparator.md) | key | 1 | Separator glyph sizing. Default markup supplies a slash, while custom children can supply another glyph. |
| [BreadcrumbEllipsis](/v3/reference/theming/keys/BreadcrumbEllipsis.md) | key | 2 | Collapsed-step marker. The `interactive` state turns it into the dropdown trigger shape. |

## Dropdown Menu

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [DropdownMenuGroup](/v3/reference/theming/keys/DropdownMenuGroup.md) | key | 1 | Semantic grouping only. Item spacing and dividers are owned by child item and separator slots. |
| [DropdownMenuRadioGroup](/v3/reference/theming/keys/DropdownMenuRadioGroup.md) | key | 1 | Semantic radio group only. Individual options own their indicator offset. |
| [DropdownMenuTrigger](/v3/reference/theming/keys/DropdownMenuTrigger.md) | key | 1 | Unstyled trigger pass-through so callers can compose Button or custom trigger chrome. |
| [DropdownMenuContent](/v3/reference/theming/keys/DropdownMenuContent.md) | key | 1 | Popover-like menu surface with bounded height, menu padding, and side-aware entrance motion. |
| [DropdownMenuItem](/v3/reference/theming/keys/DropdownMenuItem.md) | key | 1 | Selectable menu row. Focus uses neutral accent, destructive rows tint text and focus fill without changing the surface recipe. |
| [DropdownMenuCheckboxItem](/v3/reference/theming/keys/DropdownMenuCheckboxItem.md) | key | 2 | Toggleable menu row with reserved indicator space at the leading edge. See also: [DropdownMenuItem.root](/v3/reference/theming/keys/DropdownMenuItem.md#theme-key-DropdownMenuItem-root). |
| [DropdownMenuRadioItem](/v3/reference/theming/keys/DropdownMenuRadioItem.md) | key | 2 | Mutually exclusive menu row. Same layout as [DropdownMenuCheckboxItem.root](/v3/reference/theming/keys/DropdownMenuCheckboxItem.md#theme-key-DropdownMenuCheckboxItem-root); selection state comes from the radio primitive. |
| [DropdownMenuLabel](/v3/reference/theming/keys/DropdownMenuLabel.md) | key | 1 | Non-interactive group label using the mono micro uppercase recipe. |
| [DropdownMenuSeparator](/v3/reference/theming/keys/DropdownMenuSeparator.md) | key | 1 | Full-width menu divider that bleeds through the content padding. |
| [DropdownMenuShortcut](/v3/reference/theming/keys/DropdownMenuShortcut.md) | key | 3 | Alignment wrapper for the trailing keyboard hint. The nested [KbdGroup.root](/v3/reference/theming/keys/KbdGroup.md#theme-key-KbdGroup-root) owns the chord. |
| [DropdownMenuSubTrigger](/v3/reference/theming/keys/DropdownMenuSubTrigger.md) | key | 2 | Menu row that opens a child surface. Open and focused states share the same neutral accent fill. |
| [DropdownMenuSubContent](/v3/reference/theming/keys/DropdownMenuSubContent.md) | key | 1 | Child popover surface for nested menu content. Mirrors [DropdownMenuContent.root](/v3/reference/theming/keys/DropdownMenuContent.md#theme-key-DropdownMenuContent-root) without the scroll height cap. |

## Context Menu

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [ContextMenuGroup](/v3/reference/theming/keys/ContextMenuGroup.md) | key | 1 | Semantic grouping only. See also: [DropdownMenuGroup.root](/v3/reference/theming/keys/DropdownMenuGroup.md#theme-key-DropdownMenuGroup-root). |
| [ContextMenuRadioGroup](/v3/reference/theming/keys/ContextMenuRadioGroup.md) | key | 1 | Semantic radio group only. See also: [DropdownMenuRadioGroup.root](/v3/reference/theming/keys/DropdownMenuRadioGroup.md#theme-key-DropdownMenuRadioGroup-root). |
| [ContextMenuTrigger](/v3/reference/theming/keys/ContextMenuTrigger.md) | key | 1 | Unstyled trigger pass-through for the element that owns the context-menu gesture. |
| [ContextMenuContent](/v3/reference/theming/keys/ContextMenuContent.md) | key | 1 | Context-menu surface. Matches [DropdownMenuContent.root](/v3/reference/theming/keys/DropdownMenuContent.md#theme-key-DropdownMenuContent-root) while using context-menu collision sizing. |
| [ContextMenuItem](/v3/reference/theming/keys/ContextMenuItem.md) | key | 1 | Selectable context-menu row. See also: [DropdownMenuItem.root](/v3/reference/theming/keys/DropdownMenuItem.md#theme-key-DropdownMenuItem-root). |
| [ContextMenuCheckboxItem](/v3/reference/theming/keys/ContextMenuCheckboxItem.md) | key | 2 | Toggleable context-menu row with reserved indicator space. See also: [DropdownMenuCheckboxItem.root](/v3/reference/theming/keys/DropdownMenuCheckboxItem.md#theme-key-DropdownMenuCheckboxItem-root). |
| [ContextMenuRadioItem](/v3/reference/theming/keys/ContextMenuRadioItem.md) | key | 2 | Radio-style context-menu row. See also: [DropdownMenuRadioItem.root](/v3/reference/theming/keys/DropdownMenuRadioItem.md#theme-key-DropdownMenuRadioItem-root). |
| [ContextMenuLabel](/v3/reference/theming/keys/ContextMenuLabel.md) | key | 1 | Non-interactive context-menu group label. See also: [DropdownMenuLabel.root](/v3/reference/theming/keys/DropdownMenuLabel.md#theme-key-DropdownMenuLabel-root). |
| [ContextMenuSeparator](/v3/reference/theming/keys/ContextMenuSeparator.md) | key | 1 | Context-menu divider that bleeds through menu padding. See also: [DropdownMenuSeparator.root](/v3/reference/theming/keys/DropdownMenuSeparator.md#theme-key-DropdownMenuSeparator-root). |
| [ContextMenuShortcut](/v3/reference/theming/keys/ContextMenuShortcut.md) | key | 3 | Alignment wrapper for context-menu command shortcuts. See also: [DropdownMenuShortcut.root](/v3/reference/theming/keys/DropdownMenuShortcut.md#theme-key-DropdownMenuShortcut-root). |
| [ContextMenuSubTrigger](/v3/reference/theming/keys/ContextMenuSubTrigger.md) | key | 2 | Context-menu row that opens a child surface. See also: [DropdownMenuSubTrigger.root](/v3/reference/theming/keys/DropdownMenuSubTrigger.md#theme-key-DropdownMenuSubTrigger-root). |
| [ContextMenuSubContent](/v3/reference/theming/keys/ContextMenuSubContent.md) | key | 1 | Child context-menu surface. See also: [DropdownMenuSubContent.root](/v3/reference/theming/keys/DropdownMenuSubContent.md#theme-key-DropdownMenuSubContent-root). |

## Menubar

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [MenubarGroup](/v3/reference/theming/keys/MenubarGroup.md) | key | 1 | Semantic grouping only inside menubar content. See also: [DropdownMenuGroup.root](/v3/reference/theming/keys/DropdownMenuGroup.md#theme-key-DropdownMenuGroup-root). |
| [MenubarRadioGroup](/v3/reference/theming/keys/MenubarRadioGroup.md) | key | 1 | Semantic radio group only inside menubar content. See also: [DropdownMenuRadioGroup.root](/v3/reference/theming/keys/DropdownMenuRadioGroup.md#theme-key-DropdownMenuRadioGroup-root). |
| [Menubar](/v3/reference/theming/keys/Menubar.md) | key | 1 | Horizontal menu bar surface. It keeps the popover/menu family language while the bar shadow stays flat. |
| [MenubarTrigger](/v3/reference/theming/keys/MenubarTrigger.md) | key | 1 | Top-level menubar trigger. Uses compact rounded corners and neutral accent open/focus states. |
| [MenubarContent](/v3/reference/theming/keys/MenubarContent.md) | key | 1 | Floating menu surface opened from the menubar. See also: [DropdownMenuContent.root](/v3/reference/theming/keys/DropdownMenuContent.md#theme-key-DropdownMenuContent-root). |
| [MenubarItem](/v3/reference/theming/keys/MenubarItem.md) | key | 1 | Selectable menubar command row. See also: [DropdownMenuItem.root](/v3/reference/theming/keys/DropdownMenuItem.md#theme-key-DropdownMenuItem-root). |
| [MenubarCheckboxItem](/v3/reference/theming/keys/MenubarCheckboxItem.md) | key | 2 | Toggleable menubar row with reserved indicator space. Differs from dropdown by using the tighter menubar row radius. |
| [MenubarRadioItem](/v3/reference/theming/keys/MenubarRadioItem.md) | key | 2 | Radio-style menubar row. Same row geometry as [MenubarCheckboxItem.root](/v3/reference/theming/keys/MenubarCheckboxItem.md#theme-key-MenubarCheckboxItem-root). |
| [MenubarLabel](/v3/reference/theming/keys/MenubarLabel.md) | key | 1 | Non-interactive menubar group label. See also: [DropdownMenuLabel.root](/v3/reference/theming/keys/DropdownMenuLabel.md#theme-key-DropdownMenuLabel-root). |
| [MenubarSeparator](/v3/reference/theming/keys/MenubarSeparator.md) | key | 1 | Menubar content divider that bleeds through menu padding. See also: [DropdownMenuSeparator.root](/v3/reference/theming/keys/DropdownMenuSeparator.md#theme-key-DropdownMenuSeparator-root). |
| [MenubarShortcut](/v3/reference/theming/keys/MenubarShortcut.md) | key | 3 | Alignment wrapper for the trailing keyboard hint inside menubar content. See also: [DropdownMenuShortcut.root](/v3/reference/theming/keys/DropdownMenuShortcut.md#theme-key-DropdownMenuShortcut-root). |
| [MenubarSubTrigger](/v3/reference/theming/keys/MenubarSubTrigger.md) | key | 2 | Menubar row that opens a nested submenu. See also: [DropdownMenuSubTrigger.root](/v3/reference/theming/keys/DropdownMenuSubTrigger.md#theme-key-DropdownMenuSubTrigger-root). |
| [MenubarSubContent](/v3/reference/theming/keys/MenubarSubContent.md) | key | 1 | Child menubar surface. See also: [DropdownMenuSubContent.root](/v3/reference/theming/keys/DropdownMenuSubContent.md#theme-key-DropdownMenuSubContent-root). |

## Navigation Menu

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [NavigationMenu](/v3/reference/theming/keys/NavigationMenu.md) | key | 1 | Root flex context that centers the navigation menu and scopes viewport mode selectors. |
| [NavigationMenuList](/v3/reference/theming/keys/NavigationMenuList.md) | key | 1 | Top-level list row for navigation menu items, with reset list styling and compact gaps. |
| [NavigationMenuItem](/v3/reference/theming/keys/NavigationMenuItem.md) | key | 1 | Positioning wrapper for one top-level navigation menu entry and its content. |
| [NavigationMenuTrigger](/v3/reference/theming/keys/NavigationMenuTrigger.md) | key | 1 | Header-scale trigger. It intentionally uses a 36px height and half-strength active fill. |
| [NavigationMenuContent](/v3/reference/theming/keys/NavigationMenuContent.md) | key | 1 | Panel content area with motion-aware slide transitions. When the viewport is disabled, this slot becomes its own popover surface. |
| [NavigationMenuLink](/v3/reference/theming/keys/NavigationMenuLink.md) | key | 1 | Link row inside a navigation panel. Active uses `bg-accent/50` so hover remains the stronger cue. |
| [NavigationMenuIndicator](/v3/reference/theming/keys/NavigationMenuIndicator.md) | key | 2 | Animated indicator container that lines up the arrow between the trigger and open panel. |
| [NavigationMenuViewport](/v3/reference/theming/keys/NavigationMenuViewport.md) | key | 2 | Absolute wrapper that positions the shared viewport below the trigger row. |

## Pagination

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [PaginationItem](/v3/reference/theming/keys/PaginationItem.md) | key | 1 | Numbered page control. Composes the Button base and switches between outline active and ghost inactive variants, with Button size tiers (defaulting to an icon square). The active item keeps a foreground-colored edge at rest so the current page stands apart from the lighter navigation buttons. |
| [NavigationPaginationNavButton](/v3/reference/theming/keys/NavigationPaginationNavButton.md) | key | 1 | Previous, next, first, or last control. Icon-only, outline, compact (sm) square: composes the Button base and outline variant and pins a `size-vueda-control-sm` square so the four edge controls read as a dense, single-tier cluster. The accessible name rides an `sr-only` label in each SFC; the visible glyph comes from the icon registry. |
| [PaginationContent](/v3/reference/theming/keys/PaginationContent.md) | key | 1 | Compact row that groups page controls without owning their button chrome. |
| [PaginationEllipsis](/v3/reference/theming/keys/PaginationEllipsis.md) | key | 1 | Omitted-page marker sized to align with neighboring pagination controls. |
| [Pagination](/v3/reference/theming/keys/Pagination.md) | key | 1 | Root pagination nav layout, centered across the available width. |
| [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) | key | 1 | Footer bar for table and objects-grid pagination, seated against the bottom of card-like data surfaces. The `px-5 py-3` padding matches the list chrome rhythm (e.g. [ViewList.underActionsBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-underActionsBar)) so the chrome above and below the grid read as a matched frame. |
| [PaginationMeta](/v3/reference/theming/keys/PaginationMeta.md) | key | 1 | Compact mono count text for page or record summaries. See also: [NavigationPaginationBar.root](/v3/reference/theming/keys/NavigationPaginationBar.md#theme-key-NavigationPaginationBar-root). |
| [PaginationFooter](/v3/reference/theming/keys/PaginationFooter.md) | key | 7 | Class forwarded to the embedded [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner [PaginationFooter.layout](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-layout) owns the responsive arrangement. |

## Sidebar

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [SidebarContent](/v3/reference/theming/keys/SidebarContent.md) | key | 1 | Scrollable main sidebar region. Icon-collapsed mode hides overflow so labels do not bleed past the rail. |
| [SidebarFooter](/v3/reference/theming/keys/SidebarFooter.md) | key | 1 | Bottom sidebar section for account and secondary controls, using the same padding cadence as the header. |
| [SidebarUserBlock](/v3/reference/theming/keys/SidebarUserBlock.md) | key | 5 | Horizontal account row for the sidebar footer. |
| [SidebarGroupContent](/v3/reference/theming/keys/SidebarGroupContent.md) | key | 1 | Full-width body area for controls inside a sidebar group. |
| [SidebarGroup](/v3/reference/theming/keys/SidebarGroup.md) | key | 1 | Section wrapper that provides local padding and positioning for group labels and actions. |
| [SidebarHeader](/v3/reference/theming/keys/SidebarHeader.md) | key | 1 | Top sidebar section for brand, search, or primary navigation controls. |
| [SidebarInput](/v3/reference/theming/keys/SidebarInput.md) | key | 1 | Sidebar-local input chrome. It binds hairline and focus colors to sidebar tokens rather than generic input tokens. |
| [SidebarMenuItem](/v3/reference/theming/keys/SidebarMenuItem.md) | key | 1 | Relative wrapper that scopes peer selectors for buttons, badges, and trailing actions. |
| [SidebarMenuSub](/v3/reference/theming/keys/SidebarMenuSub.md) | key | 1 | Nested list rail and indentation for submenu items. Icon-collapsed mode hides the nested list. |
| [SidebarMenuSubItem](/v3/reference/theming/keys/SidebarMenuSubItem.md) | key | 1 | Relative wrapper for one nested sidebar menu item. |
| [SidebarMenu](/v3/reference/theming/keys/SidebarMenu.md) | key | 1 | Vertical menu list with narrow gaps for dense sidebar navigation. |
| [SidebarGroupAction](/v3/reference/theming/keys/SidebarGroupAction.md) | key | 1 | Compact header action aligned to a group label. Hidden in icon-collapsed mode. |
| [SidebarGroupLabel](/v3/reference/theming/keys/SidebarGroupLabel.md) | key | 1 | Sidebar group heading using the page-level eyebrow recipe. |
| [SidebarInset](/v3/reference/theming/keys/SidebarInset.md) | key | 1 | Main content wrapper adjacent to the sidebar. Inset variant chrome exists in source but is not the admin-app default. |
| [SidebarMenuBadge](/v3/reference/theming/keys/SidebarMenuBadge.md) | key | 1 | Count or status badge anchored to a menu button. Tone handling stays local to sidebar tokens and hides in icon-collapsed mode. |
| [SidebarRail](/v3/reference/theming/keys/SidebarRail.md) | key | 1 | Edge hit target for toggling collapsed state. |
| [SidebarSeparator](/v3/reference/theming/keys/SidebarSeparator.md) | key | 1 | Full-bleed sidebar divider. It avoids inset hairlines so section breaks do not read as notches. |
| [SidebarTrigger](/v3/reference/theming/keys/SidebarTrigger.md) | key | 1 | Compact sidebar toggle button. The glyph is supplied through the icon registry. |
| [SidebarMenuAction](/v3/reference/theming/keys/SidebarMenuAction.md) | key | 1 | Trailing menu-item action. `showOnHover` defers visibility until hover, focus-within, or open state on desktop. |
| [SidebarMenuSubButton](/v3/reference/theming/keys/SidebarMenuSubButton.md) | key | 1 | Nested sidebar control. Active state paints the sidebar rail through [--vueda-sidebar-active-rail](/v3/reference/theming/tokens/sidebar.md#css-token-vueda-sidebar-active-rail). |
| [SidebarMenuSkeleton](/v3/reference/theming/keys/SidebarMenuSkeleton.md) | key | 1 | Placeholder menu row that aligns loading content with normal sidebar menu button geometry. |
| [SidebarProvider](/v3/reference/theming/keys/SidebarProvider.md) | key | 1 | Layout wrapper that scopes sidebar state selectors and inset variant background behavior. |
| [Sidebar](/v3/reference/theming/keys/Sidebar.md) | key | 3 | Uncollapsed sidebar body for the `none` collapsible mode. |
| [SidebarMenuButtonChild](/v3/reference/theming/keys/SidebarMenuButtonChild.md) | key | 1 | Primary sidebar menu button content. Active state uses a rail and icon tint, not a type-weight bump, so hover does not shift label width. |