Top Bar

Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
  <nord-input expand label="Search" hide-label type="search" placeholder="Search"></nord-input>
  <nord-dropdown slot="end">
    <nord-button variant="plain" slot="toggle" aria-describedby="user-tooltip">
      <nord-avatar style="transform: translateY(-1px)" name="Ariel Salminen">AS</nord-avatar>
    <nord-avatar slot="header" size="s" name="Ariel Salminen">AS</nord-avatar>
    <p slot="header" class="n-color-text-weak n-font-size-s">
      Signed in as <span class="n-font-weight-active">Ariel Salminen</span>
      <nord-dropdown-item>My profile</nord-dropdown-item>
      <nord-dropdown-item>Account Settings</nord-dropdown-item>
      <nord-dropdown-item>Change password</nord-dropdown-item>
        Keyboard commands
        <div slot="end" class="n-color-text-weaker n-font-size-xs">Cmd+K</div>
      <nord-dropdown-item>Help & Support</nord-dropdown-item>
      Sign out
      <nord-icon slot="end" name="interface-logout"></nord-icon>
  <nord-tooltip id="user-tooltip">Ariel Salminen</nord-tooltip>


Slot nameDescription
Default slot

Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.


Optional slot for menus, buttons, toggles, etc.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Applications that utilize the top bar can allow users to customize the color of the top bar to match their preference. View an example.
  • If your application allows it, include search to help users find resources and navigate.
  • Include a user menu in the end slot of the top bar.
  • Use the layout component to provide structure for the top bar component. We’ve also created an example which shows full theming capabilities.

Don’t #

  • Don’t use for global navigation. Use the navigation component instead.
  • Don’t allow the user to set a top bar color that doesn’t provide enough contrast with the content.
  • Don’t allow the user to freely pick a hex code as the top bar color. Instead, offer a choice from a predefined palette of colors which provides sufficient contrast with the content. View an example.

Theming #

Please see the Top Bar theming section in our theming documentation for detailed guidelines.

Theming Guidelines


For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines


If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

Send feedback

We use this feedback to improve our documentation.