Navigation
Navigation is a side-rail compound for app shells — selection, expandable categories, and optional collapse into an icon rail.
Bind NavigationConfig::selected_value and NavigationConfig::open_categories with Leptos signals; compose items inside NavigationBody. Pair with NavigationLink when using Leptos Router for client-side active styling. Theme width uses --orbital-navigation-width and --orbital-navigation-width-collapsed.
- Primary app shell wayfinding — routes, grouped tools, admin sections
- Expandable category groups with nested sub-items
- Collapsible rail that shrinks to icon-only width in dense layouts
- Create
selected_valueandopen_categoriessignals at the app shell root. - Build
NavigationConfigwith.with_selected_value(…)and.with_open_categories(…). - Compose
NavigationBodywithNavigationItem,NavigationCategory, and section headers. - Optional:
NavigationHeader/NavigationFooterslots;NavigationMaterialfor surface treatment.
Side rail with icon-and-label items and a parent-owned selected value. Bind signals at the shell so route changes can sync selection.
Expandable category groups with nested sub-items bound to open_categories. Use NavigationCategory when a section has many related links that should stay grouped under one header.
Static section labels that divide items into labeled blocks without accordion behavior. Add NavigationSectionHeader rows to organize long nav lists into scannable groups.
Branding row at the top of the rail linking back to the app root. NavigationAppItem pairs an icon with an href for product identity above everyday route links.
Navigation rows that navigate via href instead of selection-only state. Pass href on NavigationItem when the row should behave like a router link.
Outbound link that opens in a new tab with target="_blank". Use for documentation, support, or third-party destinations that leave the current app.
Tighter row spacing via density=NavigationDensity::Compact. Choose compact density for secondary sidebars, nested panels, or layouts that need more links in less vertical space.
Collapsible side rail that shrinks to icon-only width with collapsible=true and a parent-owned collapsed signal. Keeps categories and badges usable while reclaiming horizontal space in dense layouts.