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 v0.12.7
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 |
|---|---|---|
| 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
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Constructs ZetaGlobalHeader
ZetaGlobalHeader.new({Key? key, bool? rounded, required String platformName, Widget? logo, List<Widget> navItems = const [], Widget? searchBar, List<Widget> actionItems = const [], String? userName, VoidCallback? onHamburgerMenuPressed, VoidCallback? onAvatarButtonPressed, VoidCallback? onAppsButtonPressed, Widget? avatar, Widget? leading, Widget? trailing, String? trailingSemanticLabel = 'App switcher button', String? leadingSemanticLabel = 'Hamburger menu button', String? logoSemanticLabel = 'Zebra logo', String? avatarSemanticLabel = 'User avatar button'})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| actionItems | Action buttons to display in the header. | List<Widget> | final |
| avatar | Avatar widget. Recommended to use ZetaAvatar widget. | Widget? | final |
| avatarSemanticLabel | Semantic label for the avatar button. | String? | 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 |
| leading | Leftmost widget. Recommended to use ZetaIconButton widget. | Widget? | final |
| leadingSemanticLabel | Semantic label for the hamburger menu button. | String? | final |
| logo | (Optional) Logo widget. If null, Zebra logo will be used. | Widget? | final |
| logoSemanticLabel | Semantic label for the Zebra logo. | String? | final |
| navItems | Menu items to display in the header. | List<Widget> | final |
| onAppsButtonPressed | Callback when apps button is pressed. | VoidCallback? | final |
| onAvatarButtonPressed | Callback when avatar button is pressed. | VoidCallback? | final |
| onHamburgerMenuPressed | Callback when hamburger menu is pressed. | VoidCallback? | final |
| platformName | Header platformName in top left of header. | String | 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 | (Optional) Search bar widget. If null, a default ZetaSearchBar will be displayed. | Widget? | final |
| trailing | Trailing widget. If not provided, the app switcher button will be displayed. | Widget? | final |
| trailingSemanticLabel | Semantic label for the trailing app switcher button. | String? | final |
| userName | Set the name of the user. | String? | final |