Basic NavigationNavbar

A standard flat list of navigation items mirroring the top-level entries in Meshery Cloud's sidebar. NavigationNavbar relies entirely on external routing logic, so active state highlights must be provided manually. The addDivider property renders a visual separator between logical groups.

Nested NavigationNavbar

Group related navigation items into a collapsible accordion. This example mirrors two real sections from Meshery Cloud's sidebar — Spaces (with Workspaces, Environments, and Integrations) and Catalog (with My Designs and My Views). The component only permits one section to remain open at a time.

Permission-Gated NavigationNavbar

This example mirrors Meshery Cloud's Identity section. The parent item uses permissionKey: { anyOf: [...] } so it stays reachable when at least one child is permitted. Each child uses permissionAction: "hide" — exactly as Meshery Cloud does — so unauthorized items vanish entirely rather than showing a shield. When all children are denied, the parent itself becomes inert and displays a PermissionShield tooltip listing every unmet key.