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.11.0
Web Components
A header with support for displaying a zeta-navigation-menu
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-global-header--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The main content of the header. | text |
| leading | The leading content on the header. | text |
| navigation-menu | The navigation menu. The position is based on the 'menuPosition' property. | text |
| trailing | The trailing content on the header. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| headline | The headline text on the header. Can also be slotted. | string | undefined | undefined |
| menuPosition | The position of the navigation. | "inline" | "below" | "inline" |
| data-theme | string | "dark" |
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 |