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) |
|---|---|---|---|---|
|
|
Color theme. Can be set to 'none' for a transparent background. |
string
|
dark
|
|
|
|
Navbar title. Icon is optional. Tag can be set to h1 to h6 depending on the page. |
object
| — |
|
|
|
Determines if you want the Navbar content to be center aligned or not |
boolean
| — |
|
|
|
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
|
|
|
|
(Inherited from nav-priority) Array of links |
array
| — |
|
|
|
(Inherited from nav-priority) Button text that displays when the Priority+ Nav Dropdown is displayed. |
string
|
More
|
|
|
|
(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
| — |
|