Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Header

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Top section of the site whose purpose is to provide clear navigation and quick access to the main sections of the site.

import { HeaderStructure } from '@kubit-ui-web/react-components'
12345678910
<HeaderStructure variant={'DEFAULT'}>
  <div style={{ color: 'black', backgroundColor: '#d1d1d1', width: '100px', height: '50px', padding: '10px' }} data-position="LEFT">
    Left Content
  </div>
  <div style={{ color: 'black', backgroundColor: '#d1d1d1', width: '100px', height: '50px', padding: '10px' }} data-position="CENTER">
    Center Content
  </div>
  <div style={{ color: 'black', backgroundColor: '#d1d1d1', width: '100px', height: '50px', padding: '10px' }} data-position="RIGHT">
    Right Content
  </div>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefined style for its quick use, access them through the variant prop.

12345678910
<HeaderStructure variant={'DEFAULT'}>
  <div style={{ color: 'black', backgroundColor: '#d1d1d1', width: '100px', height: '50px', padding: '10px' }} data-position="LEFT">
    Left Content
  </div>
  <div style={{ color: 'black', backgroundColor: '#d1d1d1', width: '100px', height: '50px', padding: '10px' }} data-position="CENTER">
    Center Content
  </div>
  <div style={{ color: 'black', backgroundColor: '#d1d1d1', width: '100px', height: '50px', padding: '10px' }} data-position="RIGHT">
    Right Content
  </div>

Check the guideliness for the specific component in its own page for detailed info. To structure the breadcrumbs use the crumbs prop along with its config configBreadcrumbs:

configBreadcrumbs is an object with the following properties:

  • variant: required for setting the variant of the breadcrumb.
  • link: optional for setting the configuration of the link.
  • dividerIcon: optional prop used to set the element displayed between each crumb.
  • aria-label: optional prop used to set the aria-label of the breadcrumbs.
12345678910
<HeaderStructure
  variant={'DEFAULT'}
  aria-label="breadcrumbs"
  containerHeight={'3.5rem'}
  configBreadcrumbs={{
    variant: 'DEFAULT',
    link: {
      variant: 'PRIMARY',
      action: 'NAVIGATION',
      textVariant: 'HEADING_DISPLAY_1_EXPANDED',
ToggleAccessibility
HeaderDesign Specs