Navbar

Layout container that consist of secondary navigation system.

Published Last updated: 2.26.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-navbar/navbar.twig" with {
  title: {
    tag: "h2",
    text: "Title Text",
    icon: {
      name: "icon-name"
    }
  },
  links: [
    {
      text: "Link 1 Text",
      url: "#!"
    },
    {
      text: "Link 2 Text",
      url: "#!"
    },
    {
      text: "Link 3 Text",
      url: "#!"
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
theme

Color theme. Can be set to 'none' for a transparent background.

string dark
  • xlight , light , dark , xdark , none
title

Navbar title. Icon is optional. Tag can be set to h1 to h6 depending on the page.

object
    • tag
      • h1 , h2 , h3 , h4 , h5 , h6
    • text
    • icon
        • name

          Name of the (optional) icon to be used.

center

Determines if you want the Navbar content to be center aligned or not

boolean
  • true or false
width

Adjusts the Navbar's overall maximum width behavior -- either filling up the entire browser's total screen width (full) or just the component's parent container width (auto).

string full
  • full or auto
links

(Inherited from nav-priority) Array of links

array
  • [items]:
    • Type:object
    • Properties:
      • text
        • Type: string
      • url
        • Type: string
moreText

(Inherited from nav-priority) Button text that displays when the Priority+ Nav Dropdown is displayed.

string More
offset

(Inherited from nav-indicator) Number of pixels taken up by sticky items at the top of the page. Used for smooth scroll and gumshoe.

integer
Install Install
  npm install @bolt/components-navbar
Dependencies @bolt/components-nav-indicator @bolt/components-nav-priority @bolt/components-navlink @bolt/core-v3.x