Header

Header

Header (navbar) element to display at top of page. Will have related components Header.Left, Header.Center, Header.Right which organize content. Children take prop collapsing to specify which segments hide when collapsed.

Example Use

<Header collapse="800px">
  <Header.Left>
    ...
  </Header.Left>
  <Header.Center>
    ...
  </Header.Center>
  <Header.Right collapsing>
    ...
  </Header.Right>
</Header>

Group	Prop	Type	Description
Fixed	fixed	boolean	If true, fix header to top of viewport
collapse	collapse="x px"	string	Breakpoint at which to collapse header content.

Accessibility

• Consider use of nav component. Should we allow users to pass some sort of nav prop to a section if it will contain links? Wrapping in a nav generally could cause poor accessibility if the user does not put any links in the header

Expected behaviours in progressive enhancements

HTML

• it displays all content (collapsing or otherwise) linearly.

HTML + CSS

• it applies the theme styles and allows for collapsable menu using the checkbox hack

HTML + CSS + JS

• No additional functional requirements.