2.12.1Navbar Component in Bolt
Navbar is a list of secondary links. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-navbar
{% 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 %}
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
| — |
|
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.