Nav Containers

Nav containers let you place a styled list of links anywhere inside a section — as a sidebar, a horizontal bar, or a tabbed navigation strip.

Available types

Element	Renders as	Bootstrap class
nav-list:	Vertical pill list	.nav.flex-column.nav-pills
nav-bar:	Horizontal pill bar	.nav.nav-pills
nav-tabs:	Horizontal tab strip (styling only, no JS)	.nav.nav-tabs

Syntax

Indent child link lines with 2 spaces or 1 tab under the container keyword.

nav-list:
  Home -> /
  Blog -> /blog
  Contact -> /contact

nav-bar:
  Home -> /
  Blog -> /blog
  Pricing -> /pricing

nav-tabs:
  Overview -> /docs
  API Reference -> /docs/api
  Examples -> /docs/examples

Child item syntax

Two equivalent forms are accepted for each child line:

• Bare link (preferred): Label -> /path
• nav-item: alias: nav-item: Label -> /path

Both produce identical output. Choose whichever reads more naturally in context.

nav-list:
  Home -> /
  nav-item: Blog -> /blog

Placing nav containers in a layout

Nav containers are elements, so they can be used inside any section or column alongside other content.

/// section

col:
  nav-list:
    Overview -> /docs
    Getting Started -> /docs/getting-started
    API -> /docs/api

col:
  h2: Documentation
  p: Browse the guides on the left to get started.

Notes

• nav-tabs: renders the Bootstrap tab styling only. It does not wire up JavaScript tab-switching behaviour. Use it for visual navigation where each tab is a real page link.
• Active state is not automatically highlighted; apply custom CSS if you need to mark the current page.