navigation keys
Source file: client/lib/theme/vueda-tailwind/navigation/index.js
Breadcrumb
| Component | Kind | Slots | Description |
|---|---|---|---|
| Breadcrumb | key | 1 | Root context only. The trail's visible layout lives on BreadcrumbList.root. |
| BreadcrumbList | key | 1 | Inline wrapping row for breadcrumb items. |
| BreadcrumbItem | key | 1 | One breadcrumb step plus its separator affordance, sized as an inline cluster. |
| BreadcrumbLink | key | 1 | Navigable trail step. Hover and focus move toward foreground without changing weight. |
| BreadcrumbPage | key | 1 | Current-page trail step. Uses foreground colour, not heavier type, so the trail still reads as one line. |
| BreadcrumbSeparator | key | 1 | Separator glyph sizing. Default markup supplies a slash, while custom children can supply another glyph. |
| BreadcrumbEllipsis | key | 2 | Collapsed-step marker. The interactive state turns it into the dropdown trigger shape. |
Dropdown Menu
| Component | Kind | Slots | Description |
|---|---|---|---|
| DropdownMenuGroup | key | 1 | Semantic grouping only. Item spacing and dividers are owned by child item and separator slots. |
| DropdownMenuRadioGroup | key | 1 | Semantic radio group only. Individual options own their indicator offset. |
| DropdownMenuTrigger | key | 1 | Unstyled trigger pass-through so callers can compose Button or custom trigger chrome. |
| DropdownMenuContent | key | 1 | Popover-like menu surface with bounded height, menu padding, and side-aware entrance motion. |
| DropdownMenuItem | key | 1 | Selectable menu row. Focus uses neutral accent, destructive rows tint text and focus fill without changing the surface recipe. |
| DropdownMenuCheckboxItem | key | 2 | Toggleable menu row with reserved indicator space at the leading edge. See also: DropdownMenuItem.root. |
| DropdownMenuRadioItem | key | 2 | Mutually exclusive menu row. Same layout as DropdownMenuCheckboxItem.root; selection state comes from the radio primitive. |
| DropdownMenuLabel | key | 1 | Non-interactive group label using the mono micro uppercase recipe. |
| DropdownMenuSeparator | key | 1 | Full-width menu divider that bleeds through the content padding. |
| DropdownMenuShortcut | key | 3 | Alignment wrapper for the trailing keyboard hint. The nested KbdGroup.root owns the chord. |
| DropdownMenuSubTrigger | key | 2 | Menu row that opens a child surface. Open and focused states share the same neutral accent fill. |
| DropdownMenuSubContent | key | 1 | Child popover surface for nested menu content. Mirrors DropdownMenuContent.root without the scroll height cap. |
Context Menu
| Component | Kind | Slots | Description |
|---|---|---|---|
| ContextMenuGroup | key | 1 | Semantic grouping only. See also: DropdownMenuGroup.root. |
| ContextMenuRadioGroup | key | 1 | Semantic radio group only. See also: DropdownMenuRadioGroup.root. |
| ContextMenuTrigger | key | 1 | Unstyled trigger pass-through for the element that owns the context-menu gesture. |
| ContextMenuContent | key | 1 | Context-menu surface. Matches DropdownMenuContent.root while using context-menu collision sizing. |
| ContextMenuItem | key | 1 | Selectable context-menu row. See also: DropdownMenuItem.root. |
| ContextMenuCheckboxItem | key | 2 | Toggleable context-menu row with reserved indicator space. See also: DropdownMenuCheckboxItem.root. |
| ContextMenuRadioItem | key | 2 | Radio-style context-menu row. See also: DropdownMenuRadioItem.root. |
| ContextMenuLabel | key | 1 | Non-interactive context-menu group label. See also: DropdownMenuLabel.root. |
| ContextMenuSeparator | key | 1 | Context-menu divider that bleeds through menu padding. See also: DropdownMenuSeparator.root. |
| ContextMenuShortcut | key | 3 | Alignment wrapper for context-menu command shortcuts. See also: DropdownMenuShortcut.root. |
| ContextMenuSubTrigger | key | 2 | Context-menu row that opens a child surface. See also: DropdownMenuSubTrigger.root. |
| ContextMenuSubContent | key | 1 | Child context-menu surface. See also: DropdownMenuSubContent.root. |
Menubar
| Component | Kind | Slots | Description |
|---|---|---|---|
| MenubarGroup | key | 1 | Semantic grouping only inside menubar content. See also: DropdownMenuGroup.root. |
| MenubarRadioGroup | key | 1 | Semantic radio group only inside menubar content. See also: DropdownMenuRadioGroup.root. |
| Menubar | key | 1 | Horizontal menu bar surface. It keeps the popover/menu family language while the bar shadow stays flat. |
| MenubarTrigger | key | 1 | Top-level menubar trigger. Uses compact rounded corners and neutral accent open/focus states. |
| MenubarContent | key | 1 | Floating menu surface opened from the menubar. See also: DropdownMenuContent.root. |
| MenubarItem | key | 1 | Selectable menubar command row. See also: DropdownMenuItem.root. |
| MenubarCheckboxItem | key | 2 | Toggleable menubar row with reserved indicator space. Differs from dropdown by using the tighter menubar row radius. |
| MenubarRadioItem | key | 2 | Radio-style menubar row. Same row geometry as MenubarCheckboxItem.root. |
| MenubarLabel | key | 1 | Non-interactive menubar group label. See also: DropdownMenuLabel.root. |
| MenubarSeparator | key | 1 | Menubar content divider that bleeds through menu padding. See also: DropdownMenuSeparator.root. |
| MenubarShortcut | key | 3 | Alignment wrapper for the trailing keyboard hint inside menubar content. See also: DropdownMenuShortcut.root. |
| MenubarSubTrigger | key | 2 | Menubar row that opens a nested submenu. See also: DropdownMenuSubTrigger.root. |
| MenubarSubContent | key | 1 | Child menubar surface. See also: DropdownMenuSubContent.root. |
Navigation Menu
| Component | Kind | Slots | Description |
|---|---|---|---|
| NavigationMenu | key | 1 | Root flex context that centers the navigation menu and scopes viewport mode selectors. |
| NavigationMenuList | key | 1 | Top-level list row for navigation menu items, with reset list styling and compact gaps. |
| NavigationMenuItem | key | 1 | Positioning wrapper for one top-level navigation menu entry and its content. |
| NavigationMenuTrigger | key | 1 | Header-scale trigger. It intentionally uses a 36px height and half-strength active fill. |
| NavigationMenuContent | key | 1 | Panel content area with motion-aware slide transitions. When the viewport is disabled, this slot becomes its own popover surface. |
| NavigationMenuLink | key | 1 | Link row inside a navigation panel. Active uses bg-accent/50 so hover remains the stronger cue. |
| NavigationMenuIndicator | key | 2 | Animated indicator container that lines up the arrow between the trigger and open panel. |
| NavigationMenuViewport | key | 2 | Absolute wrapper that positions the shared viewport below the trigger row. |
Pagination
| Component | Kind | Slots | Description |
|---|---|---|---|
| PaginationItem | key | 1 | Numbered page control. Composes the Button base and switches between outline active and ghost inactive variants. |
| NavigationPaginationNavButton | 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 | key | 1 | Compact row that groups page controls without owning their button chrome. |
| PaginationEllipsis | key | 1 | Omitted-page marker sized to align with neighboring pagination controls. |
| Pagination | key | 1 | Root pagination nav layout, centered across the available width. |
| NavigationPaginationBar | 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) so the chrome above and below the grid read as a matched frame. |
| PaginationMeta | key | 1 | Compact mono count text for page or record summaries. See also: NavigationPaginationBar.root. |
| PaginationFooter | key | 7 | Class forwarded to the embedded NavigationPaginationBar root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner PaginationFooter.layout owns the responsive arrangement. |
Sidebar
| Component | Kind | Slots | Description |
|---|---|---|---|
| SidebarContent | key | 1 | Scrollable main sidebar region. Icon-collapsed mode hides overflow so labels do not bleed past the rail. |
| SidebarFooter | key | 1 | Bottom sidebar section for account and secondary controls, using the same padding cadence as the header. |
| SidebarUserBlock | key | 5 | Horizontal account row for the sidebar footer. |
| SidebarGroupContent | key | 1 | Full-width body area for controls inside a sidebar group. |
| SidebarGroup | key | 1 | Section wrapper that provides local padding and positioning for group labels and actions. |
| SidebarHeader | key | 1 | Top sidebar section for brand, search, or primary navigation controls. |
| SidebarInput | key | 1 | Sidebar-local input chrome. It binds hairline and focus colors to sidebar tokens rather than generic input tokens. |
| SidebarMenuItem | key | 1 | Relative wrapper that scopes peer selectors for buttons, badges, and trailing actions. |
| SidebarMenuSub | key | 1 | Nested list rail and indentation for submenu items. Icon-collapsed mode hides the nested list. |
| SidebarMenuSubItem | key | 1 | Relative wrapper for one nested sidebar menu item. |
| SidebarMenu | key | 1 | Vertical menu list with narrow gaps for dense sidebar navigation. |
| SidebarGroupAction | key | 1 | Compact header action aligned to a group label. Hidden in icon-collapsed mode. |
| SidebarGroupLabel | key | 1 | Sidebar group heading using the page-level eyebrow recipe. |
| SidebarInset | key | 1 | Main content wrapper adjacent to the sidebar. Inset variant chrome exists in source but is not the admin-app default. |
| SidebarMenuBadge | 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 | key | 1 | Edge hit target for toggling collapsed state. |
| SidebarSeparator | key | 1 | Full-bleed sidebar divider. It avoids inset hairlines so section breaks do not read as notches. |
| SidebarTrigger | key | 1 | Compact sidebar toggle button. The glyph is supplied through the icon registry. |
| SidebarMenuAction | key | 1 | Trailing menu-item action. showOnHover defers visibility until hover, focus-within, or open state on desktop. |
| SidebarMenuSubButton | key | 1 | Nested sidebar control. Active state paints the sidebar rail through Sidebar tokens.css-token:vueda-sidebar-active-rail. |
| SidebarMenuSkeleton | key | 1 | Placeholder menu row that aligns loading content with normal sidebar menu button geometry. |
| SidebarProvider | key | 1 | Layout wrapper that scopes sidebar state selectors and inset variant background behavior. |
| Sidebar | key | 3 | Uncollapsed sidebar body for the none collapsible mode. |
| SidebarMenuButtonChild | 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. |