Sidenav
The sidenav component provides a vertical navigation structure placed on the left side of the interface.
The sidenav is part of the application layout, so it can only be used inside of it. Please check the DxcApplicationLayout documentation.
| Name | Type | Description | Default |
|---|---|---|---|
Required children | React.ReactNode | The area inside the sidenav. | - |
| title | React.ReactNode | The area assigned to render the title. It is highly recommended to use the sidenav title. | - |
This compound component should only be used inside the title prop.
| Name | Type | Description | Default |
|---|---|---|---|
Required children | React.ReactNode | The area inside the sidenav title. This area can be used to render custom content. | - |
Sections must be defined as direct children of the DxcSidenav and serve to group links, groups and/or custom content into different and distinguishable parts of the component. Consecutive sections are separated by a divider.
| Name | Type | Description | Default |
|---|---|---|---|
Required children | React.ReactNode | The area inside the sidenav section. Child items will be stacked inside a flex container. | - |
Even though any children are accepted in a group, we recommend using only the DxcSidenav.Link or any React-based router, complemented with this one, as links to the different pages.
| Name | Type | Description | Default |
|---|---|---|---|
Required children | React.ReactNode | The area inside the sidenav group. This area can be used to render sidenav links. | - |
| collapsable | boolean | If true, the sidenav group will be a button that will allow you to collapse the links contained within it. In addition, if it's collapsed and contains the currently selected link, the group title will also be marked as selected. | false |
| icon | string | (React.ReactNode & React.SVGProps <SVGSVGElement>) | A Material Symbol or a SVG element to be displayed next to the title of the group as an icon. | - |
| title | string | The title of the sidenav group. | - |
As with the DxcLink component, we decided to make our Sidenav link component a styled HTML anchor that can be used with any React-based router. You can check the Link for more information regarding this.
| Name | Type | Description | Default |
|---|---|---|---|
Required children | React.ReactNode | The area inside the sidenav link. | - |
| href | string | Page to be opened when the user clicks on the link. | - |
| icon | string | (React.ReactNode & React.SVGProps <SVGSVGElement>) | A Material Symbol or a SVG element to be displayed left to the link as an icon. | - |
| newWindow | boolean | If true, the page is opened in a new browser tab. | false |
| onClick | (event: React.MouseEvent <HTMLAnchorElement>) => void | This function will be called when the user clicks the link and the event will be passed to this function. | - |
| selected | boolean | If true, the link will be marked as selected. Moreover, in that same case, if it is contained within a collapsed group, and consequently, the currently selected link is not visible, the group title will appear as selected too. | false |
| tabIndex | number | Value of the tabindex attribute. | 0 |