2.13.0

Navbar

Navbar Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-navbar
Source code
View on Github
Dependencies
@bolt/components-nav-indicator @bolt/components-nav-priority @bolt/components-navlink @bolt/core

Bolt's Component Explorer is being upgraded. It'll return in a future release!

Overview

Navbar is a list of secondary links. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-navbar
Overview Usage Schema Edit this page

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
more_text

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