A NSW Government website

Our website uses an automatic service to translate our content into different languages. These translations should be used as a guide only.

demo dds
Department of Demonstrations

Side navigation

Side navigation helps people move through the pages in one section of the site — the current page's parent, siblings and children.

What it is

The Side navigation block renders the NSW Design System Side navigation component — the vertical menu that helps people move through the pages in one section of the site.

It shows where the current page sits: its section, the sibling pages around it, and the pages beneath it — so people can move up and down the hierarchy without returning to a landing page.

How to add it

A side navigation is slot-only: switch the page to a left-sidebar layout and it appears in the left rail. It's automatic — a Listing inside it pulls the whole section from the site and builds the menu, so you don't add it from the block menu or type the items by hand.

You don't nest items by hand: the block works out the levels from each item's address, so the menu mirrors the real site structure (up to four levels deep). The current page is highlighted automatically. The Example tab shows a two-level section.

Switch the page to a left-sidebar layout — the section navigation builds itself

Configure it

The section nav is automatic — you don't edit it on the page. Behind it, a few options control what it shows:

  • Heading — the section label shown above the list (and on the mobile toggle).
  • Heading link — where that label links to, usually the section's landing page.
  • Show only the current branch — collapse the parts of the tree that aren't on the current page's path. On by default.
  • Include the section root — add the top-level section page as the first item in the list.

Tips

  • Use it for long sections with several pages — it's the counterpart to In-page navigation, which moves within a single page.
  • Keep labels short; they sit in a narrow column.
  • The menu rebuilds itself from the site structure, so there's nothing to keep in sync when pages move or get renamed.

Example

A two-level side navigation. The current page is highlighted automatically.