Navigation Shortcodes

Navigation shortcodes provide structured wayfinding across complex document hierarchies, facilitating accessible movement between related sections and views.

1. Breadcrumb (breadcrumb)

The breadcrumb shortcode informs users of their current location within the site hierarchy and provides one-click links to parent pages.

Parameters

Example

1

{{< breadcrumb items="Home (/), Documentation (/docs/), Shortcodes (/docs/shortcodes/), Navigation (/docs/shortcodes/navigation/)" >}}

2. Tabs & Tab Panels (tabs, tab-panel)

Tabs organise content into separate views within the same context, allowing users to alternate between related perspectives without navigating away from the page. Following official @carbon/web-components specifications (<cds-tabs>, <cds-tab>, <cds-tab-panel>), the tabs component supports line tabs, contained tabs, secondary subtitles, status badges, and accessible keyboard navigation.

Parameters

Container (tabs)

Tab Panel (tab-panel)

Examples

1. Standard Line Tabs with Icons

2. Contained Tabs with Secondary Labels & Badges

3. Vertical Tabs (type="vertical")

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{{< tabs type="contained" >}}
  {{< tab-panel title="Architecture" icon="diagram" secondaryLabel="Engine v2.1" badge="Core" badgeColor="blue" selected="true" >}}
  Modular multi-subdomain Hugo engine with zero-copy Float32Array Web Worker pipelines.
  {{< /tab-panel >}}

  {{< tab-panel title="Theming" icon="color-palette" secondaryLabel="18 Palettes" badge="Live" badgeColor="green" >}}
  Theme-adaptive tokens with dynamic light/dark mode switching driven by client preference.
  {{< /tab-panel >}}

  {{< tab-panel title="Legacy System" icon="warning" disabled="true" >}}
  Disabled tab content.
  {{< /tab-panel >}}
{{< /tabs >}}

3. Content Switcher (content-switcher)

The content-switcher renders an accessible segmented control button group, commonly used to toggle between alternate visual modes (e.g. Code vs Preview, or Metric vs Raw view).

Parameters

Example

1

{{< content-switcher options="Standard Build, Production Minified, Debug Mode" >}}

4. Pagination (pagination & pagination-nav)

Pagination controls divide large sets of records or articles into discrete pages, improving load times and reducing visual density.

Parameters

• pagination:
  • total (Number): Total item count.
  • page (Number): Current page index (1-based).
  • pageSize (Number): Items per page.
  • pageSizes (String): Comma-separated allowed page size options.
• pagination-nav:
  • total (Number): Total page count.
  • current (Number): Current active page.

Example

1
2
3

{{< pagination total="250" page="1" pageSize="25" pageSizes="10,25,50,100" >}}

{{< pagination-nav total="8" current="3" >}}

5. Overflow Menu (overflow-menu)

The overflow-menu displays additional or secondary actions under an accessible vertical ellipsis trigger.

Parameters

Example

1

{{< overflow-menu items="Download Markdown, Export PDF, Inspect Raw Metadata, View Revisions" align="right" >}}{{< /overflow-menu >}}