Bolt Design System

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

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

  npm install @bolt/components-navbar

Dependencies

@bolt/components-smooth-scroll

@bolt/core-v3.x

Navbar

Layout container that consist of secondary navigation system.