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.
- 1.Title (Optional)
- 2.Group Title (Optional)
- 3.Page or Section Link
- 4.Divider
- 5.Current Page or Section
| Component token | Element | Core token | Value |
|---|---|---|---|
backgroundColor | Sidenav container | color-grey-100 | #f2f2f2 |
titleFontColor | Title | color-grey-800 | #4d4d4d |
groupTitleFontColor | Group title | color-black | #000000 |
groupTitleHoverBackgroundColor | Group title background:hover | color-grey-200 | #e6e6e6 |
groupTitleActiveBackgroundColor | Group title background:active | color-grey-800 | #4d4d4d |
groupTitleSelectedFontColor | Group title:selected | color-white | #ffffff |
groupTitleSelectedBackgroundColor | Group title background:selected | color-grey-800 | #4d4d4d |
groupTitleSelectedHoverFontColor | Group title:hover selected | color-white | #ffffff |
groupTitleSelectedHoverBackgroundColor | Group title background:selected hover | color-grey-900 | #333333 |
linkFontColor | Link | color-grey-800 | #4d4d4d |
linkHoverBackgroundColor | Link background:hover | color-grey-200 | #e6e6e6 |
linkSelectedFontColor | Link:selected | color-white | #ffffff |
linkSelectedBackgroundColor | Link background:selected | color-grey-800 | #4d4d4d |
linkSelectedHoverFontColor | Link:selected hover | color-white | #ffffff |
linkSelectedHoverBackgroundColor | Link background:selected hover | color-grey-900 | #333333 |
linkFocusColor | Link:focus | color-blue-600 | #0095ff |
scrollBarThumbColor | Scroll thumb | color-grey-200-a | #0000001a |
scrollBarTrackColor | Scroll track | color-transparent | transparent |
| Component token | Element | Core token | Value |
|---|---|---|---|
titleFontFamily | Title | font-family-sans | 'Open Sans', sans-serif |
titleFontSize | Title | font-scale-04 | 1.25rem / 20px |
titleFontStyle | Title | font-style-normal | normal |
titleFontWeight | Title | font-weight-semibold | 600 |
titleFontLetterSpacing | Title | spacing-0 | 0em |
groupTitleFontFamily | Group title | font-family-sans | 'Open Sans', sans-serif |
groupTitleFontSize | Group title | font-scale-02 | 0.875rem / 14px |
groupTitleFontStyle | Group title | font-style-normal | normal |
groupTitleFontWeight | Group title | font-weight-semibold | 600 |
linkFontFamily | Link | font-family-sans | 'Open Sans', sans-serif |
linkFontSize | Link | font-scale-02 | 0.875rem |
linkFontStyle | Link | font-style-normal | normal |
linkFontWeight | Link | font-weight-regular | 400 |