Global Header
The Header is the topmost, persistent navigation bar across the application. It contains global actions and utilities such as the product logo, primary navigation, search, and user profile access. It anchors the user in the application and remains consistent across all views.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v1.4.0
Web Components
A header component which can contain branding, navigation, search, and
user profile actions. Header will only allow a maximum of 6 menu items and 6
action items. Any additional items will be hidden. If you have a maximum amount
(6) of menu and action items, the search bar will be hidden at a screen size of
1440px or smaller.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-global-header--docs
Slots
| Name | Description | Type |
|---|---|---|
| platform-name | Slot for the platform name in the header. Falls back to the platformName property if not provided. | text |
| menu-items | Slot for menu items on the left side of the header. Expects elements of type zeta-button or zeta-dropdown-menu-button. | text |
| action-items | Slot for action items on the right side of the header. Expects elements of type zeta-icon-button or zeta-action-menu-button. | text |
| user-avatar | Slot for user avatar. Input should be of type zeta-avatar. You must set the size prop to xxs. | text |
| logo | Slot for a custom logo to replace the default Zebra logo. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| data-theme | Autoset the theme to dark mode for this component. | string | "dark" |
| platformName | The platform name text on the header. | string | undefined | undefined |
| name | The name to show in the header, next to the user icon. | String | "Name" |
| initials | The initials to display within the user icon. | String | "RK" |
| appSwitcher | Shows the app switcher icon. Make true to show the app switcher icon. | Boolean | false |
| searchbar | Shows the search bar. Make true to show the search bar. | Boolean | false |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
Flutter component not available yet