Navbar

Layout container that consist of secondary navigation system.

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