Updated: This page has been updated.
See DESY-161 for details.
Header
The header identifies the product and provides universal access to key tools and elements across all pages.
The guideline content on this page is synced with Figma and can be used as a source of truth.
Open in Figma
Anatomy
- Logo
- Link
- “Create new” button
- Icon button
- Search field
- 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.
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.
- Default — transparent on the header background.
- Hover — lavender background fill (rectangular, no rounding).
- Focused — sharp blue rectangle border (no rounding) to make keyboard focus unambiguous.
- Selected — darker lavender background fill, indicates the current page.
Default
Hover
Focused
Selected
development/documentation/docs/header/examples/states.html<div class="d-flex flex-wrap gap-32 align-items-center">
<div class="d-flex flex-column align-items-center">
<small class="text-secondary mb-8">Default</small>
<header class="navbar navbar-default docs-navbar-static" id="vudNavHeaderStateDefault">
<nav class="navbar-collapse">
<ul class="nav navbar-nav nav-tabs first-level" role="menubar" aria-label="Default state demonstration">
<li role="none"><a href="#!" class="nav-item fl-menu-item" role="menuitem">Menu item</a></li>
</ul>
</nav>
</header>
</div>
<div class="d-flex flex-column align-items-center">
<small class="text-secondary mb-8">Hover</small>
<header class="navbar navbar-default docs-navbar-static" id="vudNavHeaderStateHover">
<nav class="navbar-collapse">
<ul class="nav navbar-nav nav-tabs first-level" role="menubar" aria-label="Hover state demonstration">
<li role="none"><a href="#!" class="nav-item fl-menu-item hover" role="menuitem">Menu item</a></li>
</ul>
</nav>
</header>
</div>
<div class="d-flex flex-column align-items-center">
<small class="text-secondary mb-8">Focused</small>
<header class="navbar navbar-default docs-navbar-static" id="vudNavHeaderStateFocused">
<nav class="navbar-collapse">
<ul class="nav navbar-nav nav-tabs first-level" role="menubar" aria-label="Focused state demonstration">
<li role="none"><a href="#!" class="nav-item fl-menu-item focus" role="menuitem">Menu item</a></li>
</ul>
</nav>
</header>
</div>
<div class="d-flex flex-column align-items-center">
<small class="text-secondary mb-8">Selected</small>
<header class="navbar navbar-default docs-navbar-static" id="vudNavHeaderStateSelected">
<nav class="navbar-collapse">
<ul class="nav navbar-nav nav-tabs first-level" role="menubar" aria-label="Selected state demonstration">
<li class="active" role="none"><a href="#!" class="nav-item fl-menu-item" role="menuitem" aria-current="page">Menu item</a></li>
</ul>
</nav>
</header>
</div>
</div>
Menu link
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.
development/documentation/docs/header/examples/menu-link-selected.html<header class="navbar navbar-default" id="vudNavHeaderMenuLink" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavHeaderMenuLinkApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavHeaderMenuLinkCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavHeaderMenuLinkFlMenu" role="menubar" aria-label="Menu">
<li role="none"><a href="#!" class="nav-item fl-menu-item" role="menuitem">Menu item</a></li>
<li class="active" role="none"><a href="#!" class="nav-item fl-menu-item" role="menuitem" aria-current="page">Menu item</a></li>
<li role="none"><a href="#!" class="nav-item fl-menu-item" role="menuitem">Menu item</a></li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Messages">
<span aria-hidden="true" class="spirisicon spirisicon-message"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Notifications">
<span aria-hidden="true" class="spirisicon spirisicon-notification"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Help">
<span aria-hidden="true" class="spirisicon spirisicon-help"></span>
</button>
</li>
<li class="navbar-form" role="search">
<form class="form-group search-group">
<label class="sr-only" for="vudNavHeaderMenuLinkSearch">Search</label>
<input id="vudNavHeaderMenuLinkSearch" class="form-control" aria-label="Search in help" type="search" placeholder="Search in help…">
<span class="search-icon">Search icon</span>
<span class="clear-search">Clear</span>
</form>
</li>
<li class="dropdown user-dropdown">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" aria-controls="vudNavHeaderMenuLinkUserMenu" aria-label="User menu">
User first and last name
<span aria-hidden="true" class="spirisicon spirisicon-user"></span>
<small class="selectedContext">Company name</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" id="vudNavHeaderMenuLinkUserMenu" role="menu">
<li role="none"><a href="#!" role="menuitem">My profile</a></li>
<li role="none"><a href="#!" role="menuitem">Sign out</a></li>
</ul>
</li>
</ul>
</nav>
</header>
Accessibility
Keyboard interaction
All components should be reachable via TAB and SHIFT+TAB keys. The focused-state border is a deliberately sharp blue rectangle so keyboard focus stays unambiguous regardless of the selected state’s lavender treatment.
- 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-expandedwitharia-controlspointing at the dropdown panel.
development/documentation/docs/header/examples/keyboard-focus.html<header class="navbar navbar-default" id="vudNavHeaderKbdFocus" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavHeaderKbdFocusApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavHeaderKbdFocusCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavHeaderKbdFocusFlMenu" role="menubar" aria-label="Menu">
<li role="none"><a href="#!" class="nav-item fl-menu-item focus" role="menuitem">Menu item</a></li>
<li role="none"><a href="#!" class="nav-item fl-menu-item" role="menuitem">Menu item</a></li>
<li role="none"><a href="#!" class="nav-item fl-menu-item" role="menuitem">Menu item</a></li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Messages">
<span aria-hidden="true" class="spirisicon spirisicon-message"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Notifications">
<span aria-hidden="true" class="spirisicon spirisicon-notification"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Help">
<span aria-hidden="true" class="spirisicon spirisicon-help"></span>
</button>
</li>
<li class="navbar-form" role="search">
<form class="form-group search-group">
<label class="sr-only" for="vudNavHeaderKbdFocusSearch">Search</label>
<input id="vudNavHeaderKbdFocusSearch" class="form-control" aria-label="Search in help" type="search" placeholder="Search in help…">
<span class="search-icon">Search icon</span>
<span class="clear-search">Clear</span>
</form>
</li>
<li class="dropdown user-dropdown">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" aria-controls="vudNavHeaderKbdFocusUserMenu" aria-label="User menu">
User first and last name
<span aria-hidden="true" class="spirisicon spirisicon-user"></span>
<small class="selectedContext">Company name</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" id="vudNavHeaderKbdFocusUserMenu" role="menu">
<li role="none"><a href="#!" role="menuitem">My profile</a></li>
<li role="none"><a href="#!" role="menuitem">Sign out</a></li>
</ul>
</li>
</ul>
</nav>
</header>
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.
Use brief text labels to identify the destination’s purpose.
Don’t use long text labels.
Specs
Developer reference
The examples below show ready-to-copy markup for the canonical white header (.navbar-default). The deprecated colour variants are documented at the bottom of this section — they continue to ship in 2.x and are removed in 3.0.
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 examples below mirror the reference scripts nc4navigation.js and app.js used on this docs site.
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.
development/documentation/docs/header/examples/complex.html<header class="navbar navbar-default demo-with-icons" id="vudNavDefault" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavDefaultCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavDefaultFlMenu" role="menubar" aria-label="Menu">
<li>
<a href="#!" class="nav-item fl-menu-item" id="startPage" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="second-level-children active">
<a href="#!" class="nav-item fl-menu-item has-children" id="customers" role="menuitem" aria-label="Item two" aria-haspopup="true" aria-selected="true" aria-expanded="false">Item two
<span class="caret"></span>
</a>
<ul class="second-level" id="slm-customers" aria-label="Item two" role="menu">
<li role="none" class="dropdown">
<a href="#!" tabindex="0" class="nav-item sl-menu-item dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
Item one<span class="caret"></span>
</a>
<ul class="third-level dropdown-menu" role="menu" aria-label="Item one">
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item one</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item four</a>
</li>
</ul>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item sl-menu-item" >Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item four</a>
</li>
<li role="none" class="disabled">
<a href="#!" class="nav-item sl-menu-item" >Item five</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="nav-item fl-menu-item" id="otherPage" role="menuitem" aria-selected="false">Item three</a>
</li>
<li class="menudrop dropdown hidden">
<a class="dropdown-toggle" id="vudNavDefaultMenuDropTrigger" href="#!" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="hidden">Menu</span>
<i class="icon-align-justify"></i>
</a>
<ul class="dropdown-menu" id="vudNavDefaultMenuDropContent" role="menu" aria-expanded="false" aria-hidden="true">
<li class="dropdown navbar-brand hidden" id="vudNavDefaultBrand"></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="navbar-form" role="search">
<form class="form-group search-group">
<label class="sr-only" for="form_control_ex1">Search</label>
<input id="form_control_ex1" class="form-control" aria-label="searchBlock" type="text" placeholder="Search...">
<span class="search-icon">Search icon</span>
<span class="clear-search">Clear</span>
</form>
</li>
<li class="icon attention">
<button type="button" class="btn btn-icon" aria-label="Alert">
<span aria-hidden="true" class="spirisicon spirisicon-notification"></span>
</button>
</li>
<li class="icon attention">
<button type="button" class="btn btn-icon" aria-label="Support">
<span aria-hidden="true" class="spirisicon spirisicon-message"></span>
</button>
</li>
<li class="dropdown shopping-cart">
<a role="button" class="dropdown-toggle" href="#!" aria-label="Shopping cart" data-toggle="dropdown" aria-expanded="false">
<span aria-hidden="true" class="spirisicon spirisicon-shopping-cart"></span>
27.250,00 SEK
<span class="caret"></span>
<span class="badge">5</span>
</a>
<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true">
<li role="menuitem">
<a href="#!" class="">Shopping cart items</a>
</li>
</ul>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="help">
<span aria-hidden="true" class="spirisicon spirisicon-help"></span>
</button>
</li>
<li class="dropdown icon-dropdown icon hidden">
<a class="dropdown-toggle" id="vudNavDefaultIconsMenuDropContent" role="button" href="#!" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Open contextual overflow menu with more action options">
<span class="spirisicon spirisicon-overview" aria-hidden="true"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="vudNavDefaultIconsMenuDropContent"></ul>
</li>
<li class="dropdown user-dropdown">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Information area">
Christian M.
<span class="spirisicon spirisicon-user"></span>
<small class="selectedContext">Cool Company name AB</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" role="menu">
<li class="user-details-area clear" role="menuitem">
<div title="[email protected]">
<div class="user-image">
<img src="../../assets/docs/img/avatar.png" alt="User avatar image">
</div>
<div class="user-text">
<span>Christian McBale Jr.</span>
<span class="text-disabled">[email protected]</span>
</div>
</div>
</li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">My profile</a>
</li>
<li role="menuitem">
<a href="#!">Language</a>
</li>
<li role="menuitem">
<a href="#!">My location</a>
</li>
<li class="divider"></li>
<li role="menuitem">
<p>Visma Recruit <br>Copyright 2021 Visma.</p>
</li>
<li role="menuitem">
<p>Visma Recruit is made possible by Visma and other <a href="#!">open source and third party licenses</a>.</p>
</li>
<li role="menuitem"><p><a href="#!">Terms of Service</a></p></li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">Help</a>
</li>
<li role="menuitem">
<a href="#!">Report a problem</a>
</li>
<li class="divider divider-strong"></li>
<li role="menuitem">
<button class="btn btn-lg" type="button">
<span class="spirisicon spirisicon-sm spirisicon-logout"></span>
Sign out
</button>
</li>
<li class="mt-16 text-center" role="menuitem">
<span>Latest login: 2022-09-09 15:33</span>
</li>
</ul>
</li>
</ul>
</nav>
</header>User details dropdown
development/documentation/docs/header/examples/user-details-dropdown.html<header class="navbar navbar-default" id="vudNavDefaultDetailsDropdown" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavDefaultDetailsDropdownCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavDefaultDetailsDropdownFlMenu" role="menubar" aria-label="Menu"> </ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="dropdown user-dropdown">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" aria-expanded="true" role="button" aria-label="Information area">
Christian M.
<span class="spirisicon spirisicon-user"></span>
<small class="selectedContext">Cool Company name AB</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" role="menu">
<li class="user-details-area clear" role="menuitem">
<div title="[email protected]">
<div class="user-image">
<img src="../../assets/docs/img/avatar.png" alt="User avatar image">
</div>
<div class="user-text">
<span>Christian McBale Jr.</span>
<span class="text-disabled">[email protected]</span>
</div>
</div>
</li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">My profile</a>
</li>
<li role="menuitem">
<a href="#!">Language</a>
</li>
<li role="menuitem">
<a href="#!">My location</a>
</li>
<li class="divider"></li>
<li role="menuitem">
<p>Visma Recruit <br>Copyright 2021 Visma.</p>
</li>
<li role="menuitem">
<p>Visma Recruit is made possible by Visma and other <a href="#!">open source and third party licenses</a>.</p>
</li>
<li role="menuitem"><p><a href="#!">Terms of Service</a></p></li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">Help</a>
</li>
<li role="menuitem">
<a href="#!">Report a problem</a>
</li>
<li class="divider divider-strong"></li>
<li role="menuitem">
<button class="btn btn-lg" type="button">
<span class="spirisicon spirisicon-sm spirisicon-logout"></span>
Sign out
</button>
</li>
<li class="mt-16 text-center" role="menuitem">
<span>Latest login: 2022-09-09 15:33</span>
</li>
</ul>
</li>
</ul>
</nav>
</header>Simple example (one level)
development/documentation/docs/header/examples/simple.html<header class="navbar navbar-default demo-with-icons" id="vudNavDefaultSimple" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavDefaultSimpleCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavDefaultSimpleFlMenu" role="menubar" aria-label="Menu">
<li>
<a href="#!" class="nav-item fl-menu-item" id="startPage-1" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="active">
<a href="#!" class="nav-item fl-menu-item" id="customers-1" role="menuitem" aria-label="Item two" aria-haspopup="true" aria-selected="true" aria-expanded="false">Item two</a>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<button type="button" class="btn btn-icon" aria-label="Alert">
<span aria-hidden="true" class="spirisicon spirisicon-notification"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Settings">
<span aria-hidden="true" class="spirisicon spirisicon-settings"></span>
</button>
</li>
</ul>
</nav>
</header>Brand text
Replace the navbar brand with your own image. See the example below.
development/documentation/docs/header/examples/brand-image.html<header class="navbar navbar-default" id="vudNavDefaultBrandSimple" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
</header>With icons
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 add a <span> with the relevant icon class.
development/documentation/docs/header/examples/icons.html<header class="navbar navbar-default demo-with-icons" id="vudNavDefaultIcons" role="navigation">
<nav class="collapse navbar-collapse" id="vudNavDefaultIconsCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<button type="button" class="btn btn-icon" aria-label="location">
<span aria-hidden="true" class="spirisicon spirisicon-map-pin"></span>
</button>
</li>
<li class="icon attention">
<button type="button" class="btn btn-icon" aria-label="Support">
<span aria-hidden="true" class="spirisicon spirisicon-message"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="info">
<span aria-hidden="true" class="spirisicon spirisicon-info"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="help">
<span aria-hidden="true" class="spirisicon spirisicon-help"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="favourites">
<span aria-hidden="true" class="spirisicon spirisicon-star"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="docs">
<span aria-hidden="true" class="spirisicon spirisicon-file"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Calendar">
<span aria-hidden="true" class="spirisicon spirisicon-calendar"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Search">
<span aria-hidden="true" class="spirisicon spirisicon-search"></span>
</button>
</li>
</ul>
</nav>
</header>
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.
development/documentation/docs/header/examples/icons-with-badge.html<header class="navbar navbar-default demo-with-icons" id="vudNavDefaultMoreIcons" role="navigation">
<nav class="collapse navbar-collapse" id="vudNavDefaultMoreIconsCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<button type="button" class="btn btn-icon" aria-label="Alert">
<span aria-hidden="true" class="spirisicon spirisicon-notification"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="User">
<span aria-hidden="true" class="spirisicon spirisicon-user"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Shopping cart, 5 items">
<span aria-hidden="true" class="spirisicon spirisicon-shopping-cart"></span>
<span class="badge badge-danger">5</span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Home">
<span aria-hidden="true" class="spirisicon spirisicon-home"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Tools">
<span aria-hidden="true" class="spirisicon spirisicon-overview"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="User settings">
<span aria-hidden="true" class="spirisicon spirisicon-user-panel"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Reminder">
<span aria-hidden="true" class="spirisicon spirisicon-megaphone"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Phone">
<span aria-hidden="true" class="spirisicon spirisicon-support"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="Logout">
<span aria-hidden="true" class="spirisicon spirisicon-logout"></span>
</button>
</li>
</ul>
</nav>
</header>
With search box
development/documentation/docs/header/examples/search-box.html<header class="navbar navbar-default demo-with-icons" id="nc4navTopMain" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="nc4navCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs navbar-right first-level">
<li class="navbar-form" role="search">
<form class="form-group search-group">
<label class="sr-only" for="form_control_ex1">Search</label>
<input id="form_control_ex1" class="form-control" aria-label="searchBlock" type="text" placeholder="Search...">
<span class="search-icon">Search icon</span>
<span class="clear-search">Clear</span>
</form>
</li>
</ul>
</nav>
</header>With shopping cart
development/documentation/docs/header/examples/shopping-cart.html<header class="navbar navbar-default demo-with-icons" id="nc4navTopMain" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="nc4navCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs navbar-right first-level">
<li class="icon dropdown shopping-cart">
<a role="button" class="dropdown-toggle" href="#!" aria-label="Shopping cart" data-toggle="dropdown" aria-expanded="false">
<span aria-hidden="true" class="spirisicon spirisicon-shopping-cart"></span>
27.250,00 SEK
<span class="caret"></span>
<span class="badge">5</span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">
<a href="#!" class="">Shopping cart items</a>
</li>
</ul>
</li>
<li class="icon attention">
<button type="button" class="btn btn-icon" aria-label="email">
<span aria-hidden="true" class="spirisicon spirisicon-mail"></span>
</button>
</li>
<li class="icon">
<button type="button" class="btn btn-icon" aria-label="chat, 2 unread">
<span aria-hidden="true" class="spirisicon spirisicon-message"></span>
<span class="badge badge-danger">2</span>
</button>
</li>
</ul>
</nav>
</header>Deprecated colour variants — removed in 3.0
The .navbar-primary (graphite) and .navbar-secondary (legacy white duplicate) colour variants are deprecated in 2.6 and removed in 3.0. The canonical .navbar-default is now the single supported white variant. Replace these classes with .navbar-default before upgrading to 3.0. See the migration guide and deprecations list at the repo root.
Graphite navigation (.navbar-primary) — deprecated
Demo page available at demo-page-primary.php until the 3.0 removal.
development/documentation/docs/header/examples/navbar-primary.html<header class="navbar navbar-primary demo-with-icons" id="vudNavPrimary" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavPrimaryCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavPrimaryFlMenu" role="menubar" aria-label="Menu">
<li>
<a href="#!" class="nav-item fl-menu-item" id="startPage-2" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="second-level-children active">
<a href="#!" class="nav-item fl-menu-item has-children" id="customers-2" role="menuitem" aria-label="Item two" aria-haspopup="true" aria-selected="true" aria-expanded="false">Item two</a>
<ul class="second-level" id="slm-customers-2" aria-label="Item two" role="menu">
<li role="none" class="dropdown">
<a href="#!" tabindex="0" class="nav-item sl-menu-item dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
Item one<span class="caret"></span>
</a>
<ul class="third-level dropdown-menu" role="menu" aria-label="Item one">
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item one</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item four</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item five</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item six</a>
</li>
</ul>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item sl-menu-item" >Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item four</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item five</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<a href="#!" title="Alert" role="button" aria-label="Alert">
<span class="spirisicon spirisicon-notification" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="location" role="button" aria-label="location">
<span class="spirisicon spirisicon-map-pin" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="Support" role="button" aria-label="Support">
<span class="spirisicon spirisicon-message" aria-hidden="true"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="favourites">
<span aria-hidden="true" class="spirisicon spirisicon-star"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Shopping cart">
<span aria-hidden="true" class="spirisicon spirisicon-shopping-cart"></span>
<span class="badge">5</span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="help">
<span aria-hidden="true" class="spirisicon spirisicon-help"></span>
</a>
</li>
<li class="dropdown user-dropdown pristine">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Information area">
Christian M.
<span class="spirisicon spirisicon-user"></span>
<small class="selectedContext">Cool Company name AB</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" role="menu">
<li class="user-details-area clear" role="menuitem">
<div title="[email protected]">
<div class="user-image">
<img src="../../assets/docs/img/avatar.png" alt="User avatar image">
</div>
<div class="user-text">
<span>Christian McBale Jr.</span>
<span class="text-disabled">[email protected]</span>
</div>
</div>
</li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">My profile</a>
</li>
<li role="menuitem">
<a href="#!">Language</a>
</li>
<li role="menuitem">
<a href="#!">My location</a>
</li>
<li class="divider"></li>
<li role="menuitem">
<p>Visma Recruit <br>Copyright 2021 Visma.</p>
</li>
<li role="menuitem">
<p>Visma Recruit is made possible by Visma and other <a href="#!">open source and third party licenses</a>.</p>
</li>
<li role="menuitem"><p><a href="#!">Terms of Service</a></p></li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">Help</a>
</li>
<li role="menuitem">
<a href="#!">Report a problem</a>
</li>
<li class="divider divider-strong"></li>
<li role="menuitem">
<button class="btn btn-lg" type="button">
<span class="spirisicon spirisicon-sm spirisicon-logout"></span>
Sign out
</button>
</li>
<li class="mt-16 text-center" role="menuitem">
<span>Latest login: 2022-09-09 15:33</span>
</li>
</ul>
</li>
</ul>
</nav>
</header>White navigation (.navbar-secondary) — deprecated
Demo page available at demo-page-secondary.php until the 3.0 removal.
development/documentation/docs/header/examples/navbar-secondary.html<header class="navbar navbar-secondary demo-with-icons" id="vudNavPrimaryIcons" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavPrimaryIconsCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavPrimaryIconsFlMenu" role="menubar" aria-label="Menu">
<li>
<a href="#!" class="nav-item fl-menu-item" id="startPage-3" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="second-level-children active">
<a href="#!" class="nav-item fl-menu-item has-children" id="customers-3" role="menuitem" aria-label="Item two" aria-haspopup="true" aria-selected="true" aria-expanded="false">Item two</a>
<ul class="second-level" id="slm-customers-3" aria-label="Item two" role="menu">
<li role="none" class="dropdown">
<a href="#!" tabindex="0" class="nav-item sl-menu-item dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
Item one<span class="caret"></span>
</a>
<ul class="third-level dropdown-menu" role="menu" aria-label="Item one">
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item one</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item four</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item five</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item six</a>
</li>
</ul>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item sl-menu-item" >Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item four</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item five</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<a href="#!" title="Alert" role="button" aria-label="Alert">
<span class="spirisicon spirisicon-notification" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="location" role="button" aria-label="location">
<span class="spirisicon spirisicon-map-pin" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="Support" role="button" aria-label="Support">
<span class="spirisicon spirisicon-message" aria-hidden="true"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="favourites">
<span aria-hidden="true" class="spirisicon spirisicon-star"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Shopping cart">
<span aria-hidden="true" class="spirisicon spirisicon-shopping-cart"></span>
<span class="badge">5</span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="help">
<span aria-hidden="true" class="spirisicon spirisicon-help"></span>
</a>
</li>
<li class="dropdown user-dropdown pristine">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Information area">
Christian M.
<span class="spirisicon spirisicon-user"></span>
<small class="selectedContext">Cool Company name AB</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" role="menu">
<li class="user-details-area clear" role="menuitem">
<div title="[email protected]">
<div class="user-image">
<img src="../../assets/docs/img/avatar.png" alt="User avatar image">
</div>
<div class="user-text">
<span>Christian McBale Jr.</span>
<span class="text-disabled">[email protected]</span>
</div>
</div>
</li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">My profile</a>
</li>
<li role="menuitem">
<a href="#!">Language</a>
</li>
<li role="menuitem">
<a href="#!" tabindex="-1" aria-disabled="true">My location</a>
</li>
<li class="divider"></li>
<li role="menuitem">
<p>Visma Recruit <br>Copyright 2021 Visma.</p>
</li>
<li role="menuitem">
<p>Visma Recruit is made possible by Visma and other <a href="#!">open source and third party licenses</a>.</p>
</li>
<li role="menuitem"><p><a href="#!">Terms of Service</a></p></li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">Help</a>
</li>
<li role="menuitem">
<a href="#!">Report a problem</a>
</li>
<li class="divider divider-strong"></li>
<li role="menuitem">
<button class="btn btn-lg" type="button">
<span class="spirisicon spirisicon-sm spirisicon-logout"></span>
Sign out
</button>
</li>
<li class="mt-16 text-center" role="menuitem">
<span>Latest login: 2022-09-09 15:33</span>
</li>
</ul>
</li>
</ul>
</nav>
</header>