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 |
|---|---|---|---|
New appTitle | React.ReactNode | Object used to configure the header application title. | - |
New bottomContent | React.ReactNode | The content rendered in the bottom part of the sidenav, under the navigation menu. | - |
New defaultExpanded | boolean | Initial state of the expansion of the sidenav, only when it is uncontrolled. | - |
New displayGroupLines | boolean | If true the nav menu will have lines marking the groups. | - |
New 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;
items: (Item | GroupItem)[];
}and {
items: (Item | GroupItem)[];
title?: string };
} | - |
New onExpandedChange | (value: boolean) => void | Function called when the expansion state of the sidenav changes. | - |
New topContent | React.ReactNode | The content rendered in the upper part of the sidenav, under the branding. | - |