holy grail docs

Holy Grail

A page layout with a sidebar on the left and another on the right.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage 
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: 'Primary sidebar',
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: 'Secondary sidebar',
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: 'This is a holy grail layout.',
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Holy Grail (holy-grail.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
content *

The main content area of the layout.

 any —
  • —
sidebar

The primary sidebar of the layout. Sidebar twig template is expected to be passed here.

 object —
  • —
secondary_sidebar

The secondary sidebar of the layout. Secondary sidebar twig template is expected to be passed here.

 object —
  • —
Holy Grail Sidebar (holy-grail-sidebar.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
content

Render content of the primary sidebar.

 any —
  • —
trigger_icon

Set the icon of the trigger button that is shown in smaller viewports.

 string —
  • —
trigger_label

Set the text of the trigger button that is shown in smaller viewports.

 string —
  • —
Holy Grail Secondary Sidebar (holy-grail-secondary-sidebar.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
content

Render content of the secondary sidebar.

 any —
  • —
Install Install 
npm install @bolt/layouts-holy-grail
Dependencies @bolt/components-icon @bolt/core-v3.x

holy grail

Basic Holy Grail Layout The Holy Grail layout renders a sidebar on the left and another on the right. It is a top level page layout. Important Notes: The sidebars are sticky at and above the medium breakpoint. The primary sidebar transforms into a modal below the medium breakpoint. User can tap a trigger button to activate the modal. trigger_icon and trigger_label props are available for customizing the icon and label text in the trigger button. The secondary sidebar disappears entirely below the medium breakpoint. This sidebar is intended for non-essential information. Holy Grail layout should be used in tandem with Site layout. It would go into the main content area. Tech Doc is a great example of using Holy Grail layout, Site layout, Side Nav, Content Pagination, and Article element together. View demo Read more about holy grail layout on Wikipedia. Demo
Primary sidebar
Secondary sidebar
This is a holy grail layout.
Twig
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: 'Primary sidebar',
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: 'Secondary sidebar',
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: 'This is a holy grail layout.',
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
HTML
Not available in plain HTML. Please use Twig.

holy grail use case navigation

Use Case: Navigation The Holy Grail layout is commonly used for documentation design where a page would display a book nav and a page level table of contents. Important Notes: The primary sidebar works best with the Side Nav component. The secondary sidebar works best with the Table of Contents component. Demo

Section One

This is a holy grail layout.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.

Section Two

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.
Twig
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: side_nav,
    trigger_icon: 'documentation',
    trigger_label: 'Book Navigation',
    attributes: {
      class: 't-bolt-gray-xlight',
    },
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: table_of_contents,
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: content,
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
HTML
Not available in plain HTML. Please use Twig.