Anatomy

The NavigationNavbar consists of an outer menu wrapper and a list of internal list items powered by Sistent's MenuItem and ListItemText components.

  1. Menu Wrapper: Contains the dense menu list and handles the internal logic for accordion expansion states.
  2. Parent Items: Top-level navigation items that can either trigger a direct navigation action or expand to reveal children.
  3. Child Items: Nested navigation elements rendered within a collapsible container directly beneath their parent.
  4. Icons: Optional leading graphics for quick visual recognition.
  5. 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: NavigationNavbar does not natively perform route matching or automatically inject selected styling into active items. You must handle your application's routing logic externally and pass appropriately styled ReactNodes into the title or icon properties 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 showOnWeb property to construct hybrid navigation trees. Setting showOnWeb to 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 permissionKey rather 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 custom onClick interventions.