Navigation Navbar
The NavigationNavbar component is a structured, responsive vertical menu system ideal for application sidebars, supporting a single level of nesting and integrated declarative permission gating.
Anatomy
The NavigationNavbar consists of an outer menu wrapper and a list of internal list items powered by Sistent's MenuItem and ListItemText components.
- Menu Wrapper: Contains the dense menu list and handles the internal logic for accordion expansion states.
- Parent Items: Top-level navigation items that can either trigger a direct navigation action or expand to reveal children.
- Child Items: Nested navigation elements rendered within a collapsible container directly beneath their parent.
- Icons: Optional leading graphics for quick visual recognition.
- Expand/Collapse Toggles: Automatically appended to parent items that contain children.
When to Use NavigationNavbar
- Application Sidebars: Ideal for the primary global navigation interface in web applications (like Meshery or Kanvas).
- Settings Panels: Useful for categorized, multi-section configuration menus.
- Responsive Layouts: Designed to adapt easily inside temporary drawers on mobile devices or permanent drawers on desktop.
Best Practices
Single-Level Nesting: The component strictly supports one level of nesting (Parent → Child). Avoid attempting to pass deeply nested arrays into child items, as they will be ignored by the rendering logic.
Active Route Highlighting:
NavigationNavbardoes not natively perform route matching or automatically injectselectedstyling into active items. You must handle your application's routing logic externally and pass appropriately styledReactNodes into thetitleoriconproperties to achieve active highlighting.Exclusive Expansion: The component internally manages its accordion state to ensure only one nested section is open at a time. This prevents vertical bloat in constrained sidebar environments.
Desktop vs Mobile: Use the
showOnWebproperty to construct hybrid navigation trees. SettingshowOnWebto false hides the item on desktop breakpoints, allowing you to inject mobile-only links (like "Profile" or "Settings") directly into the navigation tree.Declarative Permissions: Utilize
permissionKeyrather than manual boolean logic. When a user lacks authorization, the component correctly locks the parent item from expanding and renders it completely inert, providing standard shield tooltips without requiring customonClickinterventions.