Bolt Design System

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

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`	—	—

Navbar

Published

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

Overview

Install via NPM

Usage

Schema