Basic Side Nav
Side nav is a secondary navigation. It is commonly used in documentation design.
Important Notes:
Although nesting is possible, it is not recommended to go more than 4 levels deep.
Side nav is intended to be used as the left sidebar of a Holy Grail layout.
Tech Doc is a great example of using Holy Grail layout, Site layout, Side Nav, Content Pagination, and Article element together. View demo
Demo
Twig
// List item template
{% set list_items %}
{% set icon_external_link %}
{% include '@bolt-components-icon/icon.twig' with {
name: 'external-link',
} only %}
{% endset %}
{% include '@bolt-components-side-nav/side-nav-li.twig' with {
link: {
content: 'Item text',
icon: icon_external_link, // Set a custom icon for external link.
attributes: {
href: 'https://pega.com',
},
},
current: true, // When set to true, the item is indicated as the current page.
expanded: true, // When set to true, it will show children.
children: children, // Pass another list in here.
} only %}
{% endset %}
// List template
{% set list %}
{% include '@bolt-components-side-nav/side-nav-ul.twig' with {
content: list_items, // Pass list items in here.
} only %}
{% endset %}
// Side nav template
{% include '@bolt-components-side-nav/side-nav.twig' with {
headline: {
content: 'Headline text',
link_attributes: {
href: 'https://pega.com',
},
},
content: list, // Pass list in here.
} only %}
HTML
Not available in plain HTML. Please use Twig.