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.