navbar docs

Navbar

Layout container that consist of secondary navigation system.

Published Last updated: 3.4.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.

          • —
    • hide_title

      Set the breakpoint at which you wish to hide the title text.

      • from-xsmall-bp or from-small-bp
center

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

 boolean —
  • —
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

navbar centered

navbar hide title

Setting "hide_title" to a breakpoint size will hide the title text at that size. This example shows "hide_title": "from-xsmall-bp". Resize to see the change.

navbar short

navbar width

The Navbar component's full width option allows the component to span the entire page / screen's width in size -- ideal for sticky nav and overall site navigation.

This full config option for the Navbar component can be combined with the other config options available such as center.

The Navbar component's auto width option allows the component to be used in situations where it doesn't / shouldn't span the browser's entire screen-width in size (ex. in a sidebar or off-canvas nav)

This provides maximum flexibility when coming up with creative solutions.

navbar

navbar theme variation

Theme: xlight

Theme: light

Theme: dark

Theme: xdark

Theme: none

navbar linked title

Activate linked title by passing in an url

navbar transparent

Remove theme and gradient for a transparent option

navbar no links