Header - National Design System

Added in v1.0.0 Updated in v1.11.0

The region at the top of every page, where the top bar, the DGA digital stamp panel, and the main navigation compose into one responsive header.

Header Structure

The header wraps three layers without creating a box of its own: the top bar for government branding and utilities, the main navigation bar, and the expandable DGA digital stamp panel.

Header Structure
header ├── div.nds-topbar.nds-content-wrapper │ ├── button.nds-digitalStamp-tab │ └── div.nds-topbar-info │ ├── div#nds-digitalStamp (expandable panel, hidden by default) │ └── div.nds-content-wrapper │ └── div.nds-digitalStamp-notices │ ├── div.nds-digitalStamp-card (notice cards) │ │ ├── div.nds-digitalStamp-icon │ │ └── div.nds-digitalStamp-content │ └── div.nds-digitalStamp-register │ └── nav.nds-main-nav.nds-content-wrapper └── div.nds-nav-container ├── a.nds-brand │ ├── img.nds-brand-logo │ └── span.nds-brand-name │ └── span.nds-brand-slogan ├── ul.nds-nav-minimal │ └── li.nds-mainNav-toggler (hamburger button) └── div.nds-collapse#ndsNavCollapse └── div.nds-collapse-content ├── ul.nds-nav-primary │ ├── li.nds-nav-item │ │ └── a.nds-nav-link │ ├── li.nds-nav-item.nds-dropdown │ │ ├── a.nds-nav-link │ │ └── div.nds-dropdown-menu │ │ └── div.nds-dropdown-content.nds-content-wrapper │ └── div.nds-show-more └── ul.nds-nav-actions └── li.nds-nav-item └── a/button.nds-nav-link

Header Parts

Each layer has its own page, with demos, modifier classes, and its JavaScript API.

  • Main Navigation covers the navigation bar: branding, primary links, dropdown menus, utility actions, and the mobile drawer.
  • Top Bar covers the government branding strip above the navigation, with the date, clock, weather, and dark mode toggle.
  • DGA Digital Stamp covers the expandable verification panel.

Usage Guidelines

Best Practices

  • The <header> element carries display: contents, so it creates no box of its own. The top bar, the digital stamp panel, and the navigation bar join the page flow directly as siblings.
  • Style the parts, not the wrapper. Background, padding, borders, and sticky behavior belong on .nds-topbar and .nds-main-nav. Rules set on <header> render nothing.
  • This applies to every <header> on the page, not only the site header. A header element carried in from an existing layout loses its own box, so move that styling to a child element.
  • Keep one header region per page, holding the three layers in the order the structure tree shows.
</div>
Last Modified Date: 02/09/2026 - 01:16 AM
Was this page useful?
60% of users said Yes from 2843 Feedbacks