navbar docs

Navbar

Layout container that consist of secondary navigation system.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage 
// Set up the navbar items
{% set navbar_items %}
  {% include '@bolt-components-navbar/navbar-li.twig' with {
    link: {
      content: 'Section 1',
      attributes: {
        href: '#section-1'
      }
    }
  } only %}
  ...
{% endset %}
{% set navbar_list %}
  {% include '@bolt-components-navbar/navbar-ul.twig' with {
    content: navbar_items,
  } only %}
{% endset %}

// Pass the navbar items to the navbar template
{% include '@bolt-components-navbar/navbar.twig' with {
  title: {
    content: 'This is the navbar title',
    icon: {
      name: 'bullseye'
    },
    link: {
      attributes: {
        href: 'https://google.com'
      },
    },
  },
  links: navbar_list
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Navbar (navbar.twig)
Prop Name Description Type Default Value Option(s)
title

Navbar title. Icon is optional. Tag can be set to h1 to h6 depending on the page.

 object —
    • content

      Title text. Should be plain-text but may contain some HTML. Defaults to "Go to" on small screens if empty.

      • —
    • tag
      • h1, h2, h3, h4, h5, h6, div
    • icon
        • name

          Name of the (optional) icon to be used.

          • —
    • hide_text

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

      • from-xsmall-bp or from-small-bp
    • link

      Make the Navbar title a link.

        • attributes

          A Drupal attributes object. Applies extra HTML attributes to the parent element. Add "href" attribute here.

          • —
    • secondary_content

      Insert additional content into the title region, only used on Bolt homepage.

      • —
links

Content of navbar links. Navbar ul is expected here.

 any —
  • —
content

Custom navbar content. Content provided here will replace title and links.

 any —
  • —
spacing

Controls the inset spacing of the navbar

 string small
  • none, xsmall, small, medium
width

Control the width of the navbar. Full will span the entire screen width ignoring any wrapper or page max-width.

 string full
  • full or auto
center

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

 boolean false
  • —
static

Set the navbar to be static instead of sticky.

 boolean false
  • —
theme

Color theme. Can be set to 'none' for a transparent background.

 string dark
  • xlight, light, dark, xdark, none
offset

Number of pixels taken up by sticky items at the top of the page, used for smooth scroll.

 integer —
  • —
sticky_offset

Offset the top position of the navbar by a specific pixel value. Only works when Navbar is sticky.

 integer —
  • —
sticky_offset_selector

Offset the top position of the navbar by the height of a specific element or elements, which the selector points to. Selector can match multiple elements, uses the cumulative height. Must be a valid CSS selector.

 string —
  • —
scroll_offset

Ofset the top position of a page section anchor by a specific pixel value.

 integer —
  • —
uuid

Unique ID for the navbar, randomly generated if not provided.

 string —
  • —
Navbar ul (navbar-ul.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of navbar ul. Navbar li are expected here.

 any —
  • —
Navbar li (navbar-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
link *

Link of the navbar item. Pass a hash to the "href" attribute to link to an in-page section.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

      • —
    • content

      Content of the link.

      • —
    • icon

      Icon data as expected by the icon element. Accepts an additional position prop that determines placement within the Navbar Item.

        • position

          Where to position the icon within the button

          • before or after
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.

          • —
        • name

          Name of Icon

          • add-circle, add-solid, add, agile, app-development, arrow-left, bar-chart-circle, bar-chart, bell-solid, bolt-logo-colored, briefcase, bullseye, calendar, certification, check-circle, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, clock-circle, close-circle, close-solid, close, cloud, co-browse, collaboration, communications, copy-to-clipboard, credit-card, cube, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, dollar-circle, download, email, energy, entertainment, exclamation, external-link, eye-off, eye, face-happy, face-sad, facebook-solid, facebook, filter, financial, flag-solid, full-screen-off, full-screen-on, github, globe-circle, globe, government, grid, heart-solid, heart, hospitality, ideas, industries, info-circle, info-solid, insurance, integration, intelligent-virtual-assistant, interactive, java, knowledgebase, life-sciences, link, linkedin-solid, linkedin, list, lock-solid, lock, manufacturing, map-pin-solid, map-pin, media, menu, meteor, minus-circle, minus-solid, minus, mobility, molecule, more, omni-channel, orbit, partners, pega-announce, pega-book, pega-building-complex, pega-cart, pega-catalyst, pega-chat-question, pega-chat-typing, pega-chat, pega-compass, pega-connection-hierarchy, pega-cosmos, pega-database, pega-disability, pega-download-pdf, pega-handshake, pega-health-shield, pega-hub, pega-instructor, pega-map, pega-mention, pega-network, pega-patterns, pega-people, pega-phone-call, pega-pie-chart, pega-pin, pega-plane, pega-process-fabric, pega-send-submit, pega-setting, pega-shuffle, pega-subtitle, pega-tag, pega-thumbs-up, pega-timer, pega-wifi, pencil, picture, platform, podcast, presentation, print, product-delivery, refresh, reply, reporting, retail, ribbon, robo-auto, rocket, sales-automation, scalability, search, share, speed-dial, star-solid, support, system-admin, text-align-left, transportation, trash, triangle, truck, twitter-solid, twitter, unlock, upload, user-interface, user, video, warning, watch, workforce-intelligence, youtube-solid
        • custom_icon_path

          Full source path to the custom icon.

          • —
        • size

          Set icon size. If size is not set, the icon size will default to text size.

          • small, medium, large, xlarge
        • color

          Set the icon color. If color is not set, the icon will default to text color.

          • teal, navy, yellow, orange, pink, berry, wine, violet
current

Automatically mark a navbar link as current

 boolean —
  • —
Install Install 
npm install @bolt/components-navbar
Dependencies @bolt/components-smooth-scroll @bolt/core-v3.x

navbar

Basic Navbar Navbar is a sticky container for secondary page navigation. Important Notes: The title can be turned into a link by passing link attributes. Demo
Twig
// Set up the navbar items
{% set navbar_items %}
  {% include '@bolt-components-navbar/navbar-li.twig' with {
    link: {
      content: 'Section 1',
      attributes: {
        href: '#section-1'
      }
    }
  } only %}
  {% include '@bolt-components-navbar/navbar-li.twig' with {
    link: {
      content: 'Section 2',
      attributes: {
        href: '#section-2'
      }
    }
  } only %}
  ...
{% endset %}
{% set navbar_list %}
  {% include '@bolt-components-navbar/navbar-ul.twig' with {
    content: navbar_items,
  } only %}
{% endset %}

// Pass the navbar items to the navbar template
{% include '@bolt-components-navbar/navbar.twig' with {
  title: {
    content: 'This is the navbar title',
    icon: {
      name: 'bullseye'
    },
    link: {
      attributes: {
        href: 'https://google.com'
      },
    },
  },
  links: navbar_list
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar spacing

Vertical Spacing There are spacing options for the navbar. The top and bottom padding can be adjust based on the use case. Important Notes: Reference the schema for all options. Navbar schema Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  spacing: 'medium',
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar center

Center Alignment Navbar has a style variant that allows the title and links to be center aligned horizontally. Important Notes: It is recommended to set the spacing prop to xsmall when using the center prop. Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  center: true,
  spacing: 'xsmall',
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar width

Auto Width By default the navbar takes up the full width of the viewport, but the width can be set to auto as well. Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  width: 'auto',
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar static

Static Use the static prop to disable Navbar's default sticky position. Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  static: true,
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar theme

Color Themes All color themes are available for use in the navbar while dark is the default. Important Notes: If the theme prop is set to none, the navbar will have a transparent background.Reference the schema for all options. Navbar schema Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  theme: 'light',
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar hide title text

Visually Hide the Title text at Specific Breakpoints The navbar title text can be visually hidden at specific breakpoints. This is useful when working with a navbar that has a lot of links. Important Notes: This option is best combined with the center alignment.Reference the schema for all options. Navbar schema Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  title: {
    ...
    hide_text: 'from-xsmall-bp',
  },
  center: true,
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar scroll offset

Scroll Offset Scroll offset can be used when you want to offset the target scroll position of each navbar link. When a navbar link is pressed, the page will scroll down to the repsective anchor. The offset adds a specific pixel value on top of it. Demo View full page demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  scroll_offset: 16, // Adds a specific pixel value to the smooth scroll position of each section of the page.
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar sticky offset

Sticky Offset When there are multiple sticky elements on the same page, sticky offset can be used to prevent sticky elements from overlapping each other. Important Notes: The Navbar component already accounts for the sticky Page Header component, it is not necessary to pass Page Header’s selector to sticky_offset_selector. While sticky_offset_selector can automatically calculate the dynamic height of a specific element, the sticky_offset can offset a specific pixel value manually. You may choose to use that instead if you need an absolute value. Ideally, the two props are not used in tandem. Demo View full page demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  sticky_offset_selector: '#js-sticky-target', // Adds the height of the other sticky element to the top position of the sticky navbar.
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

navbar multiple

Multiple Navbars When there are multiple navbars on the same page, in order for one to push off another, the navbars cannot be siblings in the markup. They must be contained within separate elements. Important Notes: If the navbars are siblings, they will overlap each other. In such case, reference sticky offset to avoid overlapping. Demo View full page demo
Twig
<section>
  {% include '@bolt-components-navbar/navbar.twig' with {
    ...
  } only %}
  // Content goes here
</section>
<section>
  {% include '@bolt-components-navbar/navbar.twig' with {
    ...
  } only %}
  // Content goes here
</section>
HTML
Not available in plain HTML. Please use Twig.

navbar custom content

Custom Navbar A completely custom navbar can be built if neccessary. Important Notes: The content prop completely overrides the title and links props. Since this is still a navbar, it is recommended that the custom content contains links. Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with {
  content: custom_content,
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.