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 |
|---|---|---|
| children: node | The area inside the sidenav. The content will be placed inside a stack with a divider between each element. | |
| title: node | The area assigned to render the title. It is highly recommended to use the sidenav title. |
The title should be only used in the sidenav title prop.
| Name | Default | Description |
|---|---|---|
| children: node | The area inside the sidenav title. This area can be used to render custom content. |
This must be defined as children of the Sidenav. It helps to separate groups and links into different agroupations. It has the following props:
| 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 the group we recommend using only the DxcSidenav.Link or any react based router with the DxcSidenav.Link.
| Name | Default | Description |
|---|---|---|
| children: node | The area inside the sidenav group. This area can be used to render sidenav links. | |
| title: string | The title of the sidenav group. | |
| collapsable: boolean | false | If true the sidenav group title will be considered a button and the group will be collapsable. |
| icon: SVG | string | The icon to be displayed next to the title of the group. |
As the DxcLink component, we decided to make our link component in the sidenav just a styled HTML anchor element which allows it to be used in any React based router. You can check the Link for more information regarding this.
| Name | Default | Description |
|---|---|---|
| tabIndex: number | 0 | Value of the tabindex. |
| 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. |
| children: string | The area inside the sidenav link. | |
| onClick: function | This function will be called when the user clicks the link and the event will be passed to this function. |