Skip to content

Header

Experimental

A Header is used to render a responsive page header with mobile friendly navigation. It can have a logo and a title and its single level navigation can be customized.

Examples

In this example we render Header with logo and title:

Dummy logo
Title

In this example we render Header with logo only:

Dummy logo

In this example we render Header with title only:

Title

In this example we render Header without logo and title:

In this example Header has no button:

Dummy logo
Title

System props

Header supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
logoNodeComponent that renders a logo (composition pattern).
titleString
linksArray of LinkLink is defined below.
buttonLinkLink is defined below.
NameTypeDefaultRequiredDescription
textString
hrefStringWhen omitted link cannot be clicked.

Variants

You can customize Header by defining the following variants in your theme:

KeyDescription
headerSet color and bg.
header.containerSet maxWidth and padding.
header.navSet navigation bg. The navigation uses fixed position, which resets its background-color to transparent. Use this variant to override it to desired value.
header.ctaStyles for CTA button.

In this example we customize Header just like in @undataforum/preset. This needs to be done in your theme. In this example we do the customizations inside a ThemeProvider so they are visible in below source code.

Title

Visual regression testing

The following URLs can be used for visual regression testing: