Header
The Header is the masthead of our applications. It incorporates the Department of Agriculture, Fisheries and Forestry Coat of Arms logo and provides a user context on where they are.
import { ... } from '@ag.ds-next/react/header';Usage
Header components can be imported via the header entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/header';Props
| Prop | Type | Description |
|---|---|---|
| heading | string | The heading should be set to the website or service title. |
| background? | "body" | "bodyAlt"Default: "body" | The background color of the Header. |
| badgeLabel? | string | Used to indicate if an application is in a prerelease state. |
| dividerPosition? | "after" | "between"Default: "after" | When using two logos, position the horizontal dividing line 'between' the logos or 'after' them. |
| href? | stringDefault: "/" | The href to link to, for example "/". |
| logo? | ReactElement<any, string | JSXElementConstructor<any>> | The logo to display. |
| rightContent? | ReactNode | Content to placed on the right side of the Header. |
| secondHref? | string | The href to link to, for example "/". |
| secondLogo? | ReactElement<any, string | JSXElementConstructor<any>> | The second logo to display for co-branding. |
| size? | "md" | "sm"Default: "md" | The size of the Header controls the vertical height. |
| subline? | string | Used to provide additional information to describe your website or service. |
Source
You can view the full source code for this package on Github.