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.


title: nodeThe area assigned to render the title. It is highly recommended to use the sidenav title.
children: nodeThe area inside the sidenav.


This compound component should only be used inside the title prop.


children: nodeThe 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.


children: nodeThe 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.


title: stringThe title of the sidenav group.
collapsable: booleanfalseIf 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 | stringThe icon to be displayed next to the title of the group.
children: nodeThe 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.

href: stringPage to be opened when the user clicks on the link.
newWindow: booleanfalseIf true, the page is opened in a new browser tab.
icon: SVG | stringElement or path used as the icon that will be placed to the left of the link text.
selected: booleanfalseIf 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: functionThis function will be called when the user clicks the link and the event will be passed to this function.
tabIndex: number0Value of the tabindex.
children: nodeThe area inside the sidenav link.


Application layout with sidenav