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.

Open in new window

View RTL

<nord-layout>
  <nord-top-bar slot="top-bar">
    <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-button>
      <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>
      </p>
      <nord-dropdown-group>
        <nord-dropdown-item>My profile</nord-dropdown-item>
        <nord-dropdown-item>Account Settings</nord-dropdown-item>
        <nord-dropdown-item>Change password</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-group>
        <nord-dropdown-item>
          Keyboard commands
          <div slot="end" class="n-color-text-weaker n-font-size-xs">Cmd+K</div>
        </nord-dropdown-item>
        <nord-dropdown-item>Help & Support</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-item>
        Sign out
        <nord-icon slot="end" name="interface-logout"></nord-icon>
      </nord-dropdown-item>
    </nord-dropdown>
    <nord-tooltip id="user-tooltip">Ariel Salminen</nord-tooltip>
  </nord-top-bar>
</nord-layout>

<nord-layout>
  <nord-top-bar slot="top-bar">
    <nord-input expand label="Search" hide-label type="search" placeholder="Search"></nord-input>

    <nord-dropdown slot="end" align="start" position="block-end">
      <nord-button slot="toggle" variant="plain" aria-describedby="notifications-tooltip">
        <nord-icon name="navigation-notifications" size="m" color="rgba(255,255,255,0.85)"></nord-icon>
        <div class="n-counter" aria-hidden="true" style="position: absolute">12</div>
      </nord-button>
      <h2 slot="header" class="n-typescale-l">
        Notifications <span class="n-font-weight n-color-text-weaker">(12)</span>
      </h2>
      <nord-button slot="header-end" size="s" autofocus>Mark all as read</nord-button>
      <nord-message unread highlight>
        Ariel Salminen arrived to clinic with Pixie cat.
        <span slot="footer">Just now at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        New feature available! We’ve introduced a quick way to navigate between app views, actions, and more using a new
        command menu.
        <span slot="footer">12 minutes ago</span>
      </nord-message>
      <nord-message unread>
        Nina Hallikainen arrived to clinic with Durante dog.
        <span slot="footer">20 minutes ago at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        David Darnes arrived to clinic with Norfryd cat.
        <span slot="footer">2 hours ago at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        Nick Williams arrived to clinic with Moog cat.
        <span slot="footer">2 hours ago at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        Eric Habich arrived to clinic with Zero cat.
        <span slot="footer">4 hours ago at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        Elvin van Eede arrived to clinic with Amoeba cat.
        <span slot="footer">12 hours ago at Nord Clinic</span>
      </nord-message>
      <nord-dropdown-item>
        See all notifications<nord-icon slot="end" name="arrow-right-long"></nord-icon>
      </nord-dropdown-item>
    </nord-dropdown>
    <nord-tooltip id="notifications-tooltip">12 unread notifications</nord-tooltip>

    <nord-dropdown slot="end" align="start" position="block-end">
      <nord-button slot="toggle" variant="plain" aria-describedby="tasks-tooltip">
        <nord-icon name="navigation-tasks" size="m" color="rgba(255,255,255,0.85)"></nord-icon>
        <div class="n-counter" aria-hidden="true" style="position: absolute">4</div>
      </nord-button>
      <h2 slot="header" class="n-typescale-l">My tasks <span class="n-font-weight n-color-text-weaker">(4)</span></h2>
      <nord-button slot="header-end" size="s" autofocus>
        <nord-icon slot="start" size="xxs" name="interface-add-small"></nord-icon>
        Create task
      </nord-button>
      <nord-message unread>
        Make sure to ask details from John regarding yesterday’s patient who arrived late.
        <span slot="footer">Finish by Wednesday, March 8</span>
      </nord-message>
      <nord-message unread>
        Import new patients from Ocean Beach Clinic into the system.
        <span slot="footer">Finish by Thursday, March 9</span>
      </nord-message>
      <nord-message unread>
        Call David and ask about his cat’s wellbeing.
        <span slot="footer">Finish by Thursday, March 9</span>
      </nord-message>
      <nord-message unread>
        Call Anne and reschedule their visit.
        <span slot="footer">Finish by Friday, March 10</span>
      </nord-message>
      <nord-dropdown-item> See all tasks<nord-icon slot="end" name="arrow-right-long"></nord-icon> </nord-dropdown-item>
    </nord-dropdown>
    <nord-tooltip id="tasks-tooltip">4 unfinished tasks</nord-tooltip>

    <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-button>
      <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>
      </p>
      <nord-dropdown-group>
        <nord-dropdown-item>My profile</nord-dropdown-item>
        <nord-dropdown-item>Account Settings</nord-dropdown-item>
        <nord-dropdown-item>Change password</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-group>
        <nord-dropdown-item>
          Keyboard commands
          <div slot="end" class="n-color-text-weaker n-font-size-xs">Cmd+K</div>
        </nord-dropdown-item>
        <nord-dropdown-item>Help & Support</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-item>
        Sign out
        <nord-icon slot="end" name="interface-logout"></nord-icon>
      </nord-dropdown-item>
    </nord-dropdown>
    <nord-tooltip id="user-tooltip">Ariel Salminen</nord-tooltip>
  </nord-top-bar>
</nord-layout>

<style>
  @media (max-width: 768px) {
    nord-top-bar nord-input[type="search"]:focus ~ nord-dropdown {
      display: none;
    }
  }
</style>

<style>
  :root {
    /* CUSTOM ACCENT COLORS */
    --n-color-accent: #793aaf;
    --n-color-accent-secondary: #3b0075;
  }
</style>

<nord-layout>
  <nord-top-bar slot="top-bar">
    <nord-input expand label="Search" hide-label type="search" placeholder="Search"></nord-input>

    <nord-dropdown slot="end" align="start" position="block-end">
      <nord-button slot="toggle" variant="plain" aria-describedby="notifications-tooltip">
        <nord-icon name="navigation-notifications" size="m" color="rgba(255,255,255,0.85)"></nord-icon>
        <div class="n-counter" aria-hidden="true" style="position: absolute">12</div>
      </nord-button>
      <h2 slot="header" class="n-typescale-l">
        Notifications <span class="n-font-weight n-color-text-weaker">(12)</span>
      </h2>
      <nord-button slot="header-end" size="s" autofocus>Mark all as read</nord-button>
      <nord-message unread highlight>
        Ariel Salminen arrived to clinic with Pixie cat.
        <span slot="footer">Just now at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        New feature available! We’ve introduced a quick way to navigate between app views, actions, and more using a new
        command menu.
        <span slot="footer">12 minutes ago</span>
      </nord-message>
      <nord-message unread>
        Nina Hallikainen arrived to clinic with Durante dog.
        <span slot="footer">20 minutes ago at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        David Darnes arrived to clinic with Norfryd cat.
        <span slot="footer">2 hours ago at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        Nick Williams arrived to clinic with Moog cat.
        <span slot="footer">2 hours ago at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        Eric Habich arrived to clinic with Zero cat.
        <span slot="footer">4 hours ago at Nord Clinic</span>
      </nord-message>
      <nord-message unread>
        Elvin van Eede arrived to clinic with Amoeba cat.
        <span slot="footer">12 hours ago at Nord Clinic</span>
      </nord-message>
      <nord-dropdown-item>
        See all notifications<nord-icon slot="end" name="arrow-right-long"></nord-icon>
      </nord-dropdown-item>
    </nord-dropdown>
    <nord-tooltip id="notifications-tooltip">12 unread notifications</nord-tooltip>

    <nord-dropdown slot="end" align="start" position="block-end">
      <nord-button slot="toggle" variant="plain" aria-describedby="tasks-tooltip">
        <nord-icon name="navigation-tasks" size="m" color="rgba(255,255,255,0.85)"></nord-icon>
        <div class="n-counter" aria-hidden="true" style="position: absolute">4</div>
      </nord-button>
      <h2 slot="header" class="n-typescale-l">My tasks <span class="n-font-weight n-color-text-weaker">(4)</span></h2>
      <nord-button slot="header-end" size="s" autofocus>
        <nord-icon slot="start" size="xxs" name="interface-add-small"></nord-icon>
        Create task
      </nord-button>
      <nord-message unread>
        Make sure to ask details from John regarding yesterday’s patient who arrived late.
        <span slot="footer">Finish by Wednesday, March 8</span>
      </nord-message>
      <nord-message unread>
        Import new patients from Ocean Beach Clinic into the system.
        <span slot="footer">Finish by Thursday, March 9</span>
      </nord-message>
      <nord-message unread>
        Call David and ask about his cat’s wellbeing.
        <span slot="footer">Finish by Thursday, March 9</span>
      </nord-message>
      <nord-message unread>
        Call Anne and reschedule their visit.
        <span slot="footer">Finish by Friday, March 10</span>
      </nord-message>
      <nord-dropdown-item> See all tasks<nord-icon slot="end" name="arrow-right-long"></nord-icon> </nord-dropdown-item>
    </nord-dropdown>
    <nord-tooltip id="tasks-tooltip">4 unfinished tasks</nord-tooltip>

    <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-button>
      <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>
      </p>
      <nord-dropdown-group>
        <nord-dropdown-item>My profile</nord-dropdown-item>
        <nord-dropdown-item>Account Settings</nord-dropdown-item>
        <nord-dropdown-item>Change password</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-group>
        <nord-dropdown-item>
          Keyboard commands
          <div slot="end" class="n-color-text-weaker n-font-size-xs">Cmd+K</div>
        </nord-dropdown-item>
        <nord-dropdown-item>Help & Support</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-item>
        Sign out
        <nord-icon slot="end" name="interface-logout"></nord-icon>
      </nord-dropdown-item>
    </nord-dropdown>
    <nord-tooltip id="user-tooltip">Ariel Salminen</nord-tooltip>
  </nord-top-bar>
</nord-layout>

<style>
  @media (max-width: 768px) {
    nord-top-bar nord-input[type="search"]:focus ~ nord-dropdown {
      display: none;
    }
  }
</style>

Slots

Slot name	Description
Default slot	Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.
`end`	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

Integration

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

Troubleshooting

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.