Skip to main contentSkip to site searchSkip to component search
Honeycomb

header-bar

Props

Prop nameTypeDefaultDescription
childrenReactNode

Content of the bar

fixedboolean | undefinedfalse

Applies fixed position preserving the bar always on top

extraClassesstring | undefined

Injection in className

HeaderBar enables highly custom implementations for page header.

We recommend using it in combination with Grid components to distribute and position all the custom content blocks you need.

Check the example bellow for more info, notice usage of custom styles. As HeaderBar doesn't apply any color or position styles to its children you need to take care of those on your own.

import { HeaderBar, Button, BackButton, ButtonGroup, LegacyGrid, LegacyGridCol, Heading } from '@flixbus/honeycomb-react';
import { Icon, IconArrowLeft, IconInfoSolid, IconOfferSolid, IconCartSolid } from '@flixbus/honeycomb-icons-react';

const headerColorStyle = { color: 'var(--hcr-header-color)' };

<HeaderBar>
  <LegacyGrid align="center">
    <LegacyGridCol>
      <LegacyGrid align="center">
        <LegacyGridCol inline>
          <BackButton aria-label="Go back to checkout" style={headerColorStyle} />
        </LegacyGridCol>
        <LegacyGridCol>
          <Heading size={4} style={headerColorStyle}>Checkout</Heading>
        </LegacyGridCol>
      </LegacyGrid>
    </LegacyGridCol>
    <LegacyGridCol>
      <ButtonGroup justify="end" orientation="horizontal">
        <Button display="square" appearance="link" aria-label="Additional info" style={headerColorStyle}>
          <Icon InlineIcon={IconInfoSolid} size={4} aria-hidden="true" />
        </Button>
        <Button display="square" appearance="link" aria-label="Additional offers" style={headerColorStyle}>
          <Icon InlineIcon={IconOfferSolid} size={4} aria-hidden="true" />
        </Button>
        <Button display="square" appearance="link" aria-label="Go to cart" style={headerColorStyle}>
          <Icon InlineIcon={IconCartSolid} size={4} aria-hidden="true" />
        </Button>
      </ButtonGroup>
    </LegacyGridCol>
  </LegacyGrid>
</HeaderBar>

import { HeaderBar, Button, BackButton, ButtonGroup, DateTime, LegacyGrid, LegacyGridCol, Heading, Text } from '@flixbus/honeycomb-react';
import { Icon, IconQuestion } from '@flixbus/honeycomb-icons-react';

const headerColorStyle = { color: 'var(--hcr-header-color)' };

<HeaderBar>
  <LegacyGrid align="center">
    <LegacyGridCol>
      <LegacyGrid align="center">
        <LegacyGridCol inline>
          <BackButton aria-label="Go back to checkout" style={headerColorStyle} />
        </LegacyGridCol>
        <LegacyGridCol>
          <Heading size={4} flushSpace sectionHeader style={headerColorStyle}>Berlin - Munich</Heading>
          <Text small style={headerColorStyle}>
            <DateTime
              date={new Date('2020-06-02T09:00')}
              dateFormat="day, Mon D YYYY"
              displayTime
            /> | 1 Adult
          </Text>
        </LegacyGridCol>
      </LegacyGrid>
    </LegacyGridCol>
    <LegacyGridCol>
      <ButtonGroup justify="end" orientation="horizontal">
        <Button display="stacked" appearance="link" style={headerColorStyle}>
          <Icon InlineIcon={IconQuestion} size={4} aria-hidden="true" />
          Help
        </Button>
      </ButtonGroup>
    </LegacyGridCol>
  </LegacyGrid>
</HeaderBar>