Top BarDraft

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-avatar slot="end" name="Laura Williams"></nord-avatar>
  </nord-top-bar>
</nord-layout>

<style>
  :root {
    /* CUSTOM COLOR FOR TOP BAR */
    --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-avatar slot="end" name="Laura Williams"></nord-avatar>
  </nord-top-bar>
</nord-layout>

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.