Sidenav
The sidenav component provides a vertical navigation structure placed on the left side of the interface. It provides global access to navigation, branding, and user actions, ensuring consistency and orientation across products and applications.
It is part of the application layout, so it can only be used inside of it. Please check the DxcApplicationLayout documentation.
| Name | Type | Description | Default |
|---|---|---|---|
| appTitle | React.ReactNode | Object used to configure the header application title. | - |
| bottomContent | React.ReactNode | The content rendered in the bottom part of the sidenav, under the navigation menu. | - |
| defaultExpanded | boolean | Initial state of the expansion of the sidenav, only when it is uncontrolled. | - |
| displayGroupLines | boolean | If true the nav menu will have lines marking the groups. | false |
| expanded | boolean | If true, the sidenav is expanded. If undefined the component will be uncontrolled and the value will be managed internally by the component. | - |
New navItems | (Item | GroupItem)[] | Section[] | Array of items to be displayed in the navigation menu. Each item can be a single/simple item, a group item or a section. Being {
badge?: ReactElement;
icon?: string | SVG;
label: string;
onSelect?: () => void;
selected?: boolean;
href?: string;
renderItem?:
(props: { children: ReactNode })
=> ReactNode;
}The , {
badge?: ReactElement;
icon?: string | SVG;
label: string;
defaultOpen?: boolean;
items: (Item | GroupItem)[];
}and {
items: (Item | GroupItem)[];
title?: string };
} | - |
| onExpandedChange | (value: boolean) => void | Function called when the expansion state of the sidenav changes. | - |
| searchBar | {
onBlur: (value: string) => void;
onChange: (value: string) => void;
onEnter: (value: string) => void;
placeholder?: string;
} | When provided, a search bar will be rendered at the top of the sidenav. | - |
| topContent | React.ReactNode | The content rendered in the upper part of the sidenav, under the branding. | - |