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"