Design System React

AlphaThis a work in progress. Your input will help us to improve it. Report issues or raise questions on GitHub.

Site header

JSX for this example
<React.Fragment />

Site header configuration

SiteHeader uses basic subcomponents as slots for its content.

  • SiteHeader.Navigation expects a SiteNavigation component or equivalent
  • SiteHeader.Phase expects a PhaseBanner component or equivalent
  • SiteHeader.Search expects a SiteSearch component or equivalent
  • SiteHeader.Brand is a special case, described separately below

Site header brand configuration

SiteHeader.Brand should have an image child for use as the site logo. SiteHeader.Brand components can use the following props:

homeUrl
The URL of the home page. Default is /.
linkComponent (optional)
Function that returns an element, to customise the output.
siteTitle (optional)
Text to use in the site title.