Sidenav
The sidenav component is part of the layout of the application and it makes easier to divide the main screen into two different areas. The main area will have all the content and the sidenav as a secondary element as an index, including links to different resources on the web page.
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 |
|---|---|---|---|
| title | React.ReactNode | The area assigned to render the title. It is highly recommended to use the sidenav title. | - |
Required | React.ReactNode | The area inside the sidenav. | - |
This compound component should only be used inside the title prop.
| Name | Type | Description | Default |
|---|---|---|---|
| Required | 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 | 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 |
|---|---|---|---|
| title | string | The title of the sidenav group. | - |
| 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. | - |
Required | React.ReactNode | The area inside the sidenav group. This area can be used to render sidenav links. | - |
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 |
|---|---|---|---|
| href | string | Page to be opened when the user clicks on the link. | - |
| newWindow | boolean | If true, the page is opened in a new browser tab. | false |
| icon | string | (React.ReactNode & React.SVGProps <SVGSVGElement>) | A Material Symbol or a SVG element to be displayed left to the link as an icon. | - |
| 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 |
| 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. | - |
Required | React.ReactNode | The area inside the sidenav link. | - |
| tabIndex | number | Value of the tabindex attribute. | 0 |