Header

Header

Header

Header is a navigation component. It is a desktop + tablet version of the components Tab bar and Navigation bar.

Header has 1 to 8 signed tabs and 0 to 3 unsigned icons. It may contain a Deposit button.

Header supports design tokens and any color tokens. Editing is enabled.

Behaviour

Header has a maximum of 8 signed tabs and 3 unsigned icons. It is a desktop + tablet version of the components Tab bar and Navigation bar.

The max text length in a tab is 8 characters. If the text is longer, the end is hidden with "..."

Money balance should be shortened: "1K, 1M", etc. Be sure to specify the currency sign.

Also, Header can contain notifications and a Deposit button. The button is the same as Buttons.

The logo is a picture that contains a pair of dark and light versions. When adding, remember that the logo always needs a pair.

The component size depends on the layout.

When adding an icon to the tab bar, remember that the icon must have a pair: filled and outlined.

4 tabs + 3 icons

3 tabs + 2 icons

2 tabs + 1 icon

1 tab + 0 icons

2 buttons

1 button

The icon on the left can be disabled or replaced with another one.

On this page

Header

All rights reserved © GR8 Tech 2023 Twitter · View on Product Hunt