The NavigationNavbar component provides a structured, responsive vertical menu system ideal for application sidebars and settings panels. It supports a single level of collapsible nesting and integrates natively with Sistent's declarative authorization system to render unauthorized items as inert and display standard permission shields.

Basic NavigationNavbar

A basic flat navigation list. Each item receives an icon, a title, and an onClick callback. Because NavigationNavbar relies entirely on external routing logic, developers must handle route matching and custom active styles (e.g., via customized title nodes) directly.

Usage

The NavigationNavbar component is highly versatile and accommodates several structural patterns:

• Basic Navigation: Flat menu lists for simple application routing.
• Nested Navigation: Single-level accordion menus for grouping related views.
• Permission-Gated Navigation: Items that automatically lock themselves and display a PermissionShield tooltip when users lack authorization.
• Mobile-Only Navigation: Items that can be dynamically hidden on desktop layouts using the showOnWeb property.

Nested NavigationNavbar

Group related links under a collapsible parent item by providing a subItems array. The navbar natively manages accordion state to ensure only one nested section is open at a time. Note: Nesting is strictly limited to one level deep.

Permission-Gated NavigationNavbar

NavigationNavbar deeply integrates with Sistent's PermissionProvider. By supplying a permissionKey to any item, the component automatically blocks unauthorized clicks and prevents unauthorized parent items from expanding, rendering them completely inert while displaying a standard shield tooltip.