#Reference table

###Structure

<div class="Vlt-table Vlt-table--data">
|Class | Behaviour|
|---|---|
|`.Vlt-sidenav`| Basic class that wraps the component|
|`.Vlt-sidenav--light`| Modifier that adds the styles of the light theme |
|`.Vlt-sidenav--dark`| Modifier that adds the styles of the dark theme |
|`.Vlt-sidenav--rounded`| Rounds the top-right and bottom-right corners of the container for styling purposes|
|`.Vlt-sidenav--active-{colour}`| Changes the colour of the active menu item |
|`.Vlt-sidenav--collapsed`| Collapsed state of the sidenav|
</div>

###Mobile button

<div class="Vlt-table Vlt-table--data">
|Class |  Behaviour|
|---|---|
|`#Vlt-sidenav-mobile-trigger` |	On click, it searches for and opens `#Vlt-sidenav` |
|`.Vlt-sidenav__mobile`| Wraps the header to apply the predefined styles to logo and button|
|`.Vlt-sidenav__mobile--dark`| Applies the dark theme colors|
|`.Vlt-sidenav__mobile--light`| Applies the light theme colors|
|`.Vlt-sidenav__mobile__logo`| Class to be given to the logo image to give it a maximum height. You may still have to adjust the height in your own CSS.|
</div>

###Blocks

<div class="Vlt-table Vlt-table--data">
|Class |  Behaviour|
|---|---|
|`.Vlt-sidenav__block`| Wraps a sidebar block that won't scroll and will keep a fixed height with `flex-shrink: 0`|
|`.Vlt-sidenav__block--logo`| Modifier for the block that holds the logo (and the collapse trigger in collapsible navigations). Holds important styles.|
|`.Vlt-sidenav__logo`| Wraps the logo. Important in collapsible navigations.|
|`.Vlt-sidenav__block--link`| Modifier that adjusts padding in blocks containing menu links|
|`.Vlt-sidenav__elem--full`| Show content when the sidenav is in full width, hides it if it's collapsed. Only needed for collapsible sidenavs.|
|`.Vlt-sidenav__elem--collapsed`| Show content when the sidenav is in collapsed, hides it if it's full width. Only needed for collapsible sidenavs.|
|`.Vlt-sidenav__collapse`| Wraps the collapse button. Needs the id `#Vlt-sidenav-collapse-trigger` for Volta JS to work|
|`.Vlt-sidenav__collapse__close`| Contains the collapse icon|
|`.Vlt-sidenav__collapse__open`| Contains the expand icon|
|`.Vlt-sidenav__block--border-top`| Adds a top border to a block, in line with its colour scheme|
|`.Vlt-sidenav__block--border-bottom`| Adds a bottom border to a block, in line with its colour scheme|
</div>

#Menus

<div class="Vlt-table Vlt-table--data">
|Class |  Behaviour|
|---|---|
|`.Vlt-sidemenu`| Wrapper of the side navigation menu, enables independent scrolling if it goes off screen|
|`.Vlt-sidemenu__list--compressed`| Less vertical padding for menu items|
|`.Vlt-sidemenu__title`| Adds the styles to the optional separating titles|
|`.Vlt-sidemenu__link`| Class for links|
|`.Vlt-sidemenu__link--disabled`| This will make a link look disabled, take away pointer events and show a default cursor|
|`.Vlt-sidemenu__link_active`| Active class to be given to links when the user is in the corresponding page/position|
|`.Vlt-sidemenu__trigger`| Marks an element inside a branch as the trigger that will open the sub-menu. Adds the appropriate styles.|
|`.Vlt-sidemenu__trigger_active`| Active class for the branch trigger, gives the styling and also the logic that expands the branch.|
|`.Vlt-sidemenu__trigger_current`| Changes the trigger background colour when it is collapsed and has an active child|
|`.Vlt-sidemenu__trigger--disabled`| This will make a trigger look disabled, take away pointer events and show a default cursor|
|`.Vlt-sidemenu__label`| Wraps the label of a menu item in an icon menu.|
</div>