components
Header
v.1.0.0 | SaturnUsage
123456
import { HeaderStructure } from '@kubit-ui-web/react-components'; <HeaderStructure variant="DEFAULT"> <div data-position="LEFT">Left Content</div> <div data-position="CENTER">Center Content</div> <div data-position="RIGHT">Right Content</div> </HeaderStructure>;
Props
Let's delve into the versatility of the headerStructure component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Current variant of Header |
children Required | JSX.Element or JSX.Element | - | Children of header |
| crumbs | CrumbType | - | Breadcrumbs showed |
| containerHeight | String | - | Set container height |
| configBreadcrumbs | HeaderBreadcrumbsType | - | Object to set breadcrumbs props |
| backgroundColor | String | - | Background color of the header |
| scrolling | String | - | If true a shadow will be added when user does scroll |
| dataTestId | String | - | Id for testing |
| ctv | HeaderPropsStylesType | - | Modify styles for the default version of the component |