Header

The header identifies the product and provides universal access to key tools and elements across all pages.

Figma logo The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

Anatomy

  1. Logo
  2. Menu item
  3. Icon button
  4. Search field
  5. User menu
Header anatomy diagram showing: 1 — Logo, 2 — Menu item, 3 — Icon button, 4 — Search field, 5 — User menu

Usage

The header is a foundational element found on virtually every page of a digital product. It’s the first thing users see and acts as a central hub for essential functions.

It prominently displays the brand logo, helping users immediately identify the company. This builds trust and reinforces brand identity.

Header in context: Spiris logo at the left, four icon buttons (report, chat, notifications, help) and a user menu showing John Doe and My company on the right, above a side menu

States

A component can have various states — such as enabled, hover, focused, and selected — which visually communicate its current behaviour and interactivity to the user.

Menu item

Icon button

When a menu link is selected, we are using distinct visual cues to clearly indicate to the user that they are on the current page. This is essential for user orientation, preventing confusion, and ensuring a predictable navigation experience.

Accessibility

Keyboard interaction

All components should be reachable via TAB and SHIFT+TAB keys.

Best practices

Use brief text labels to identify the destination’s purpose. Long labels truncate, wrap, or push other items into the overflow menu — making the navigation harder to scan.

Do

Use brief text labels to identify the destination’s purpose.

Don't

Don’t use long text labels.

Specs

Header specs annotation showing 16 px vertical padding above and below the logo wordmark, 32 px gap between the logo and the first menu item, and 16 px right edge padding

Function-specific 2-level menu

Use the navigation bar component to help users move between closely related content that is grouped together within a page.

Figma logo The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

  1. Page link
  2. Current page
Navigation bar anatomy diagram showing: 1 — Page link, 2 — Current page

A component can have various states, such as enabled, disabled, hover, focused, and selected, which visually communicate its current behaviour and interactivity to the user.

Our platform currently utilises a specific Navigation Bar component which is positioned directly beneath the main header and the page header. It is important to note that this navigation bar is only used by the “Skatt & Bokslut” section of our platform. This navigation bar is considered a legacy component and will be deprecated and removed entirely from the design system.

Navigation bar positioned directly beneath the main header and the page header in the Skatt & Bokslut section of the platform

It is important that the entire label, icon, and surrounding area of an interactive component (like a checkbox, radio button, or accordion header) is clickable to guarantee usability and accessibility for all users. This practice creates a larger, more forgiving target area, which is a fundamental element of good design.

Navigation bar item with the cursor over the full label and surrounding area, showing the entire item is a clickable target

All components should be reachable via TAB and SHIFT+TAB keys.

Navigation bar specs annotation showing 12 px vertical padding, 16 px horizontal padding and 8 px gap between the label and the dropdown caret

Developer reference

The examples below show ready-to-copy markup for the canonical white header (.navbar-default), the only supported colour variant.

The header examples on this page are constrained to the documentation column, so the responsive script collapses them. To see the full-width header with every element visible, open the full-page header demo and resize the browser to watch the responsive collapse behaviour.

For this component you need JavaScript. The Spiris Design System ships CSS only — the responsive navigation behaviour (collapse / dropdowns / overflow) must be wired up in the consuming application. The responsive behaviour on this docs site is driven by the reference script navbar-responsive.js.

Responsive collapse order. As the available width shrinks, the reference script reclaims space in this order — the user menu always collapses before the primary menu items, so the menu links stay visible as long as possible:

  1. User menu collapses to an icon-only button.
  2. Search field shortens to its compact (icon) width.
  3. Primary menu items move into the overflow (“more”) menu, last item first; the selected item is kept visible.
  4. Icon buttons (when more than four) move into an icon overflow menu.
  5. Below the mobile breakpoint the whole bar switches to the mobile layout (hamburger menu).

Accessibility implementation

Beyond reachability via TAB / SHIFT+TAB, wire up the following ARIA semantics in the consuming application:

  • Selected menu items must use aria-current="page" — the lavender background fill alone is colour-only.
  • Icon buttons that carry a notification badge or dot must include the count in their accessible name (for example aria-label="Notifications, 2 unread").
  • The user menu trigger is a disclosure widget: pair aria-expanded with aria-controls pointing at the dropdown panel.

Complex example (three levels, product selection dropdown, user details dropdown)

The complex example retains the three-level navigation demo so consumers can see the second- and third-level sub-menu styles in context. Sub-menus are still supported — only the primary level was refreshed in 2.6.

User details dropdown

Simple example (one level)

Replace the navbar brand with your own image. See the example below.

If you need an item to have an icon instead of text in the main menu, add .icon on the <li> element that you want, and place a <button type="button" class="btn btn-icon"> inside it wrapping a <span> with the relevant icon class. Give the button an aria-label and mark the icon aria-hidden="true". The anchor-based form (<a href="#!"> inside the <li>) was deprecated in 2.6 and removed in 3.0.

Badge on items. You can add a badge on icon items by inserting a <span class="badge">+99</span>, or by adding the .attention class on the <li> tag to render a dot.