Header
Definition
The Header navigation component is a basic navigation bar that is used to help users navigate websites and applications. It is typically fixed to the top of the page but not to the top of the viewport, meaning that if a user scrolls down the navigation scrolls with the rest of the content.
The Header consists of:
- A global navigation bar, required
- A local navigation bar with logo, required
- A search bar, optional
Purpose
The purpose of the header navigation component is to provide users with an easy and intuitive way to navigate websites and applications. It allows users to quickly access different pages or sections of the site, as well as switch between different products or services if applicable.
Structure and Function
The current structure affords the ability to navigate to internal pages and other products (other URLs) that might be child products of the parent organization.
Use the primary colored top bar for links that go to ICPSR pages. Use the white bar below for links within your current application or product.
The navigation component will switch to a "drawer" that is opened with a navbar-toggler on smaller screens.
Styling
The navigation component's color will be based on the theme color for the product implementing it.
Dropdowns
For large websites, use dropdown menus to help users preview lower-level content. If lower-level sections are closely related and users will need to quickly jump between them, consider using the navigation sidebar instead of — or in addition to — a dropdown.
Icons
You can emphasize nav-links with icons. Currently, the header component only supports the "user" icon, but expect more to come in later versions of Mosaic.
Counter Nav Badges
Use counter badges with a navigation link to indicate a number of items in a cart. We suggest using the secondary color.
Accessibility Considerations
Semantic markup conveys the menu structure to users. Menus coded semantically can easily adapt to different situations, such as small screen displays, screen magnification, and other assistive technology.
Identify the menu using the HTML5 <nav> element to allow
users access to the menu directly.
Use an ordered list when the sequence of the menu items is important. Use an unordered list when the menu items are not in a specific order.
Include skip navigation links to allow users with screen readers to bypass long navigation lists. Make sure you include an id at the beginning of your main content and that it matches the skipnav link. See the code snippet at the end of this page for an example.
Labels
Label menus to make them easier to find and understand. Labels should be short but descriptive, to allow users to distinguish between multiple menus on a web page. Make sure the following labels are present in your navigation component:
Make sure the following labels are present in your navigation component.
<nav id="mosaic-nav" class="navbar navbar-expand-lg" aria-label="Main Navigation">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close">
<ul class="dropdown-menu" aria-labelledby="currentDropMenu"></ul>Current Item
Use markup to indicate the current item of a menu, such as the current page on a website, to improve orientation in the menu. We recommend using invisible text and ARIA to provide extra information to screen readers and non-sighted users that the link they're focused on is for the current page. The actual implementation will vary depending on the specific use case.
<li class="nav-item position-relative mx-lg-3 mx-0">
<a class="nav-link h6 m-0 ps-3 p-lg-3 py-2 current" aria-current="page" href="#"><span class="sr-only">Current Page: </span>Current-1</a>
</li>Overall, the header navigation component is an essential part of any website or application, providing users with an intuitive and accessible way to navigate the site or app. By following these guidelines, you can ensure that your navigation component is effective, efficient, and accessible to all users.
Sample code
Scroll the container below to explore the full header navigation example.
<!-- scroll down to the end of the component to see the target for the #skipto link -->
<div id="skip">
<a href="#skipto">Skip to Main Content</a>
</div>
<nav
class="navbar navbar-expand-lg"
id="mosaic-nav"
aria-label="Main Navigation">
<a class="department-logo nav-link" href="/static/docs/">
<img src="/static/docs/img/TCLogoMobile.svg" alt="Mosaic Logo" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar2"
type="button"
aria-controls="offcanvasNavbar2"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div
class="offcanvas offcanvas-end"
id="offcanvasNavbar2"
aria-labelledby="offcanvasNavbar2Label"
tabindex="-1">
<div class="offcanvas-header justify-content-end">
<button
class="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
type="button"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="nav-bg-light">
<a class="department-logo nav-link" href="/static/docs/">
<img src="/static/docs/img/TCLogoDesktop.svg" alt="Mosaic Logo" />
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/static/docs/" aria-current="false"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#" aria-current="false"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
width="18"
height="18">
<path
d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"></path>
</svg>
Home</a
>
</li>
<li class="nav-item">
<button
class="btn nav-link dropdown-toggle bg-nav-icon-user"
id="navbarDropdownMenuLink"
data-bs-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Passport Settings
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Option 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 3</a>
</li>
</ul>
</li>
<li class="nav-item">
<button
class="btn nav-link dropdown-toggle"
id="navbarDropdownMenuLink2"
data-bs-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Options
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink2">
<li>
<a class="dropdown-item" href="#">Option 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 3</a>
</li>
</ul>
</li>
<li class="nav-item">
<a
class="nav-link"
href="/static/docs/components"
aria-current="false"
>Browse components
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/static/docs/use" aria-current="false"
>Use in projects</a
>
</li>
</ul>
</div>
<div class="nav-bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link"
href="/static/docs/feedback"
aria-current="false"
>Give feedback</a
>
</li>
<li class="nav-item">
<button
class="btn nav-link dropdown-toggle"
id="navbarDropdownMenuLink3"
data-bs-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Options
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink3">
<li>
<a class="dropdown-item" href="#">Option 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 3</a>
</li>
</ul>
</li>
<li class="nav-item">
<button
class="btn nav-link dropdown-toggle bg-nav-icon-user"
id="navbarDropdownMenuLink4"
data-bs-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Passport Settings
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink4">
<li>
<a class="dropdown-item" href="#">Lorem</a>
</li>
<li>
<a class="dropdown-item" href="#">Lorem ipsum</a>
</li>
<li>
<a class="dropdown-item" href="#">Lorem ipsum dolor sit amet</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<main id="skipto">
<!-- page content goes here -->
</main>With optional Search
See a full-page example with the search bar.
<!-- scroll down to the end of the component to see the target for the #skipto link -->
<div id="skip">
<a href="#skipto">Skip to Main Content</a>
</div>
<nav
class="navbar navbar-expand-lg"
id="mosaic-nav"
aria-label="Main Navigation">
<a class="department-logo nav-link" href="/static/docs/">
<img src="/static/docs/img/TCLogoMobile.svg" alt="Mosaic Logo" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar3"
type="button"
aria-controls="offcanvasNavbar3"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- aria-labelledby="offcanvasNavbar2Label" BELOW?? -->
<div
class="offcanvas offcanvas-end"
id="offcanvasNavbar3"
aria-labelledby="offcanvasNavbar2Label"
tabindex="-1">
<div class="offcanvas-header justify-content-end">
<button
class="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
type="button"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="nav-bg-light">
<a class="department-logo nav-link" href="/static/docs/">
<img src="/static/docs/img/TCLogoDesktop.svg" alt="Mosaic Logo" />
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/static/docs/" aria-current="false"
>Home</a
>
</li>
<li class="nav-item">
<button
class="btn nav-link dropdown-toggle bg-nav-icon-user"
id="navbarDropdownMenuLink"
data-bs-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Passport Settings
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Option 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 3</a>
</li>
</ul>
</li>
<li class="nav-item">
<button
class="btn nav-link dropdown-toggle"
id="navbarDropdownMenuLink2"
data-bs-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Options
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink2">
<li>
<a class="dropdown-item" href="#">Option 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 3</a>
</li>
</ul>
</li>
<li class="nav-item">
<a
class="nav-link"
href="/static/docs/components"
aria-current="false"
>Browse components
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/static/docs/use" aria-current="false"
>Use in projects</a
>
</li>
</ul>
</div>
<div class="nav-bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link"
href="/static/docs/feedback"
aria-current="false"
>Give feedback</a
>
</li>
<li class="nav-item">
<button
class="btn nav-link dropdown-toggle"
id="navbarDropdownMenuLink3"
data-bs-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Options
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink3">
<li>
<a class="dropdown-item" href="#">Option 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Option 3</a>
</li>
</ul>
</li>
<li class="nav-item">
<button
class="btn nav-link dropdown-toggle bg-nav-icon-user"
id="navbarDropdownMenuLink4"
data-bs-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Passport Settings
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink4">
<li>
<a class="dropdown-item" href="#">Lorem</a>
</li>
<li>
<a class="dropdown-item" href="#">Lorem ipsum</a>
</li>
<li>
<a class="dropdown-item" href="#">Lorem ipsum dolor sit amet</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="nav-search">
<div class="col-md-6 offset-md-6 col-xl-5 offset-xl-7">
<form action="">
<search class="search-input input-group" role="search">
<input
class="form-control"
type="text"
aria-label="Enter keywords and click submit to search ICPSR for data"
aria-describedby="search-submit"
placeholder="Search by ID, PI name, etc" />
<button class="btn btn-primary" id="search-submit" type="submit">
<i class="fas fa-search"></i
><span class="visually-hidden">Search</span>
</button>
</search>
</form>
</div>
</div>
<main id="skipto">
<!-- page content goes here -->
</main>