Navigation

The navigation family covers wayfinding primitives: Breadcrumb trails, NavigationMenu flyout menus, and Menubar application menus. All share the same 32px control sizing baseline (Control sizing (VUEDA canon) tokens.css-token:vueda-control-height) and focus treatment. Pagination shares that baseline but has outgrown this page; it lives on Pagination.

This page is the visual contract the default theme guarantees. Use it as the target spec when you re-skin: every cell shown here should still read as the same control after a customization. If a cell breaks, the change has crossed from skin into design language.

For the mechanics of overriding any of this, see Customize VUEDA Appearance. In brief: values belong in CSS tokens; compositions belong in theme keys.

Every cell below is a live component, including the two open-content panels. NavigationMenu renders its content inside the menu root rather than a portal, so that panel needs nothing but reserved space. Menubar's panel is portal-based, so it is force-mounted with its side pinned to land in the same reserved space.

Breadcrumb

Breadcrumb renders a <nav> landmark containing an ordered list of location segments. The separator defaults to /; any slot content replaces it. BreadcrumbEllipsis collapses deep trails into a size-9 click target with a screen-reader label.

Theme keys: BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis.

NavigationMenu

NavigationMenu renders a horizontal list of triggers that open flyout content panels through a shared viewport. The viewport renders inside the NavigationMenu root element rather than in a portal, so with the viewport disabled an open panel sits in the menu's own stacking context and can be shown in place. Every cell below is the live component rendered in the named state, so what you see is exactly what your customization will produce.

Theme keys: NavigationMenu, NavigationMenuList, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport, NavigationMenuIndicator.

Menubar

Menubar renders a bordered application-style menu bar (h-9, rounded-vueda-control, shadow-vueda-control). Each trigger opens a portal-based content panel. The panel below is that real content, force-mounted so it stays open, and it covers every item variant the family provides.

Theme keys: Menubar, MenubarTrigger, MenubarContent, MenubarItem, MenubarLabel, MenubarSeparator, MenubarCheckboxItem, MenubarRadioItem, MenubarShortcut.