Skip to main content

Navbar Component

The navbar component is used to create a navigation bar at the top or on the side of the screen. It is used to navigate between different screens.

Usage​

The navbar component is used to create a navigation bar at the top or on the side of the screen. It is used to navigate between different screens.

component: navbar
props:
  options: # bootstrap navbar options
    bg: "light"
    expand: "lg"
  brand:
    - component: link
      props:
       label: "My App"
       to: "/"  
  items:
    - component: navbarItem
      name: "home"
      children:
        - component: navbarLink
          props:
            label: "Home"         
            to: "/"
    - component: navbarItem
      name: "about"
      children:
        - component: navbarLink
          props:
            label: "About"         
            to: "/about"

Nested Navigation​

The navbar component can be used to create nested navigation.

component: navbar
props:
  options: # bootstrap navbar options
    bg: "light"
    expand: "lg"
  brand:
    - component: link
      props:
       label: "TMS"
       to: "/"  
  items:
    - component: navbarItem
      name: "home"
      children:
        - component: navbarLink
          props:
            label: "Home"         
            to: "/"
    - component: navbarItem
      name: "about"
      children:
        - component: navbarLink
          props:
            label: "About"         
            to: "/about"     
      - component: navbarLink
          props:
            label: "Contact"         
            to: "/contact"

Mobile rendering​

On mobile, the server-driven navbar provides menu entries only. The native NavPanel owns the surrounding drawer or tablet sidebar, identity header, organization switcher, optional domain switcher, and profile entry. contextItems render beneath a divider at the bottom of the panel.

Navigation links resolve internal routes through the native navigation stack. The renderer tracks the focused app path and marks the matching link as selected for accessibility and visual styling. Logout routes receive danger styling. Dropdown items expose their expanded state and indent nested children.

The active white-label skin controls row height, typography, radius, selected background, and whether the active link uses a left accent bar. The same panel is used across phone and tablet layouts, so component YAML does not need platform-specific navigation markup.

Profile Menu Override​

The shell user dropdown can be replaced by defining an app component named System/UserProfile. When the component exists for the active organization, the framework renders it inside the avatar dropdown instead of the default logout-only menu.

Use this component for organization-specific profile actions such as developer mode toggles, account links, or user preferences.

components:
  - name: "System/UserProfile"
    displayName:
      en-US: "User Profile Menu"
    layout:
      component: layout
      children:
        - component: button
          props:
            label:
              en-US: "Developer Mode"
            onClick:
              - setSessionStorage:
                  key: "isDevMode"
                  value: "true"