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';
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. |
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 | Element | The logo to display. |
accountDetails? | { name: string; secondaryText?: string; href?: string; dropdown?: ReactNode; } | undefined | Details for the authenticated account. |
badgeLabel? | string | Used to indicate if an application is in a prerelease state. |
id? | string | Defines an identifier (ID) which must be unique. |
subLine? | string | Used to provide additional information to describe your website or service. |
Prop | Type | Description |
---|---|---|
items | (NavItem[] | { items: NavItem[]; options?: { disableGroupPadding: boolean; } | undefined; })[] | Groups of navigation items to display. |
activePath? | string | Used for highlighting the active element. |
Prop | Type | Description |
---|---|---|
children? | ReactNode |
Prop | Type | Description |
---|---|---|
children? | ReactNode | |
id? | string | Defines an identifier (ID) which must be unique. |
AppLayoutFooterDivider Props
AppLayoutFooterDivider does not have any props.
Source
You can view the full source code for this package on Github.