Navbar

Layout container that consist of secondary navigation system.

Published Last updated: 4.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: 'marketing-gray'
    },
    link: {
      attributes: {
        href: 'https://pega.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
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 list
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 item
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 component. 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

          Icon name

        • background

          Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!

          • none , circle , square
        • size

          Controls the size of the icon. Each size is set to a specific pixel value: 16px, 24px, 32px, and 38px. However, this prop is optional. When no size is specified, the icon is expected to act as an inline icon, which will grow or shrink depending on the font-size of its parent container.

          • small , medium , large , xlarge
        • color

          Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.

          • auto , teal , navy , yellow , orange , gray , 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