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 | Default | Description |
|---|---|---|
| title: node | The area assigned to render the title. It is highly recommended to use the sidenav title. | |
| children: node | The area inside the sidenav. The content will be placed inside a stack with a divider between each element. |
This compound component should only be used inside the title prop.
| Name | Default | Description |
|---|---|---|
| children: node | 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.
| Name | Default | Description |
|---|---|---|
| children: node | The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content. |
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 | Default | Description |
|---|---|---|
| title: string | The title of the sidenav group. | |
| collapsable: boolean | false | 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. |
| icon: SVG | string | The icon to be displayed next to the title of the group. | |
| children: node | 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 | Default | Description |
|---|---|---|
| href: string | Page to be opened when the user clicks on the link. | |
| newWindow: boolean | false | If true, the page is opened in a new browser tab. |
| icon: SVG | string | Element or path used as the icon that will be placed to the left of the link text. | |
| selected: boolean | false | 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. |
| onClick: function | This function will be called when the user clicks the link and the event will be passed to this function. | |
| tabIndex: number | 0 | Value of the tabindex. |
| children: node | The area inside the sidenav link. |