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="G100"
    renderEnd
    renderLogo
><Nav/></AppHeader>
content_copy
Copy

<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