Skip to main contentSkip to site searchSkip to component search
Honeycomb

header-bar

Props

Prop nameTypeDefaultDescription
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, Grid, GridCol, Heading } from '@flixbus/honeycomb-react';
import { Icon, IconArrowLeft, IconInfoSolid, IconOfferSolid, IconCartSolid } from '@flixbus/honeycomb-icons-react';

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

<HeaderBar>
  <Grid align="center">
    <GridCol>
      <Grid align="center">
        <GridCol inline>
          <BackButton aria-label="Go back to checkout" style={headerColorStyle} />
        </GridCol>
        <GridCol>
          <Heading size={4} style={headerColorStyle}>Checkout</Heading>
        </GridCol>
      </Grid>
    </GridCol>
    <GridCol>
      <ButtonGroup alignment="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>
    </GridCol>
  </Grid>
</HeaderBar>

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

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

<HeaderBar>
  <Grid align="center">
    <GridCol>
      <Grid align="center">
        <GridCol inline>
          <BackButton aria-label="Go back to checkout" style={headerColorStyle} />
        </GridCol>
        <GridCol>
          <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>
        </GridCol>
      </Grid>
    </GridCol>
    <GridCol>
      <ButtonGroup alignment="end" orientation="horizontal">
        <Button display="stacked" appearance="link" style={headerColorStyle}>
          <Icon InlineIcon={IconQuestion} size={4} aria-hidden="true" />
          Help
        </Button>
      </ButtonGroup>
    </GridCol>
  </Grid>
</HeaderBar>