AppHeader is the component to use for the headers in applications.

Usage

Import

import { AppHeader } from '@passfort/castle'
content_copy
Copy

It has three different sections:

• renderLogo, which ingests a logo (SVG preferred)
• renderEnd, which renders the end of the header, the secondary navigation normally.
• children, which is the main content of the header, which is usually the primary navigation

Example

<AppHeader
  backgroundColor="brand-blue"
  renderEnd={() => <Text color="N0">End Text</Text>}
  renderLogo={() => <Text color="N0">Logo</Text>}
>
  <Text color="N0">Content</Text>
</AppHeader>
<AppHeader
  backgroundColor="brand-blue"
  renderEnd={() => <Text color="N0">End Text</Text>}
  renderLogo={() => <Text color="N0">Logo</Text>}
>
  <Text color="N0">Content</Text>
</AppHeader>
content_copy
Copy
live example

Only navigation elements

<AppHeader backgroundColor="G100">
  <Row gap={2}>
    <Text color="N0">Nav item 1</Text>
    <Text color="N0">Nav item 2</Text>
    <Text color="N0">Nav item 3</Text>
    <Text color="N0">Nav item 4</Text>
  </Row>
</AppHeader>
<AppHeader backgroundColor="G100">
  <Row gap={2}>
    <Text color="N0">Nav item 1</Text>
    <Text color="N0">Nav item 2</Text>
    <Text color="N0">Nav item 3</Text>
    <Text color="N0">Nav item 4</Text>
  </Row>
</AppHeader>
content_copy
Copy
live example