Usage
Top Bar is a persistent header at the very top of the interface. Place global functionality such as search in the default slot, and put menus, buttons or avatars in the end slot to align them to the trailing edge.
import "@nordhealth/components/lib/TopBar"
Examples
Search
Place global search in the default slot using an expanding search input.
Account menu
Use the end slot for a user menu aligned to the trailing edge.
Notifications
The end slot can hold multiple menus, such as a notifications dropdown alongside the account menu.
Advanced
Combine search, notifications and an account menu in a single bar for a complete application header.
Color
Apply a themed colour to the top bar to match an app's branding.
RTL
Top bars follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Top Bar is a layout container with no implicit landmark role. Wrap it in a
<header>element orrole="banner"region so assistive technology can navigate to the global header. - Give the search input an accessible name (for example
labelwithhide-label) so it is announced even though the label is visually hidden. - Toggle buttons that open menus should reference a tooltip or carry a descriptive accessible name (such as via
aria-describedby), so icon-only controls in theendslot remain understandable. - Content follows source order; place the main search in the default slot before the
endslot controls so the tab order reads logically across the bar.
API reference
TopBar
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.
<nord-top-bar></nord-top-bar>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. |
Design guidelinesFor designers
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.