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
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 |
|---|---|---|
| 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 |
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 | "Platform Name" |
| 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 |
Demo
Global header component This component should not be used as an appbar in a scaffold. It can be used in custom scroll views and columns.
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatefulWidget > ZetaStatefulWidget
Constructors
Constructor for ZetaGlobalHeader
ZetaGlobalHeader.new({Key? key, bool? rounded, required String title, List<ZetaGlobalHeaderItem> tabItems = const [], List<IconButton> actionButtons = const [], ZetaAvatar? avatar, ZetaSearchBar? searchBar, VoidCallback? onAppsButton})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| actionButtons | Action buttons. | List<IconButton> | final |
| avatar | Avatar component. | ZetaAvatar? | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| onAppsButton | Call back for apps icon button shown before avatar on bar. | VoidCallback? | final |
| rounded | Sets rounded or sharp border of the containing box and the icon style. | bool? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| searchBar | Search bar component. | ZetaSearchBar? | final |
| tabItems | Tab item buttons | List<ZetaGlobalHeaderItem> | final |
| title | Header title in top left of header | String | final |