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.
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.
- Dashboard
- Spaces
- Catalog
- Logout
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.
- Spaces
- Catalog
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.
- Identity