Navbar

Layout container that consist of secondary navigation system.

Published Last updated: 5.5.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