App layout

The app layout provides a consistent way for users to navigate around a web application and access their account settings.

import { ... } from '@ag.ds-next/react/app-layout';

Usage

App layout components can be imported via the app-layout entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/app-layout';

AppLayout Props
Prop	Type	Description
children?	ReactNode
focusMode?	booleanDefault: false	Set to `true` while users are completing multi-page forms to reduce distractions. When true, the app layout sidebar will not be rendered.

AppLayoutHeader Props
Prop	Type	Description
heading	string	The heading should be set to the website or service title.
href	string	The href to link to, for example "/".
logo	ReactElement<any, string \| JSXElementConstructor<any>>	The logo to display.
accountDetails?	{ name: string; secondaryText?: string; href?: string; dropdown?: ReactNode; } \| undefined	Details for the authenticated account.
background?	"body" \| "bodyAlt"Default: "bodyAlt"
badgeLabel?	string	Used to indicate if an application is in a prerelease state.
borderColor?	ResponsiveProp<"border" \| "selected" \| "muted" \| "accent" \| "info" \| "success" \| "error" \| "warning">Default: "accent"
dividerPosition?	"after" \| "between"Default: "after"	When using two logos, position the horizontal dividing line 'between' the logos or 'after' them.
id?	string	Defines an identifier (ID) which must be unique.
palette?	ResponsiveProp<"dark" \| "light">Default: "dark"
secondHref?	string	The href to link to, for example "/".
secondLogo?	ReactElement<any, string \| JSXElementConstructor<any>>	The second logo to display for co-branding.
subLine?	string	Used to provide additional information to describe your website or service.

AppLayoutSidebar Props
Prop	Type	Description
items	(NavItem<HTMLButtonElement \| HTMLAnchorElement>[] \| { items: NavItem<HTMLButtonElement \| HTMLAnchorElement>[]; options?: { ...; } \| undefined; })[]	Groups of navigation items to display.
activePath?	string	Used for highlighting the active element.
background?	"body" \| "bodyAlt"Default: "bodyAlt"
palette?	ResponsiveProp<"dark" \| "light">
subLevelVisible?	"always" \| "whenActive"Default: "whenActive"	When to show sub-level navigation items.

AppLayoutContent Props
Prop	Type	Description
children?	ReactNode

AppLayoutFooter Props
Prop	Type	Description
background?	"body" \| "bodyAlt"Default: "body"
children?	ReactNode
id?	string	Defines an identifier (ID) which must be unique.
maxWidth?	"container" \| "containerLg"	The maximum width of the container.
palette?	ResponsiveProp<"dark" \| "light">

AppLayoutFooterDivider does not have any props.

You can view the full source code for this package on Github.