Side Menus Vertical collapsable Menus with multiple variants for side navigations
Enable Component
Enable the side menu component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                sidenavMenu: true // Enable sidenavMenu component
            }
        }
    }
}
Basic Usage
Explore more examples from the previewer
NameDescription
.side-menuBase class of the menu wrapper
.side-menu.side-menu-smMakes the menu smaller by reducing inner paddings
.side-menu.side-menu-lgMakes the menu larger by increasing inner paddings
.side-menu.side-menu-compactApplies compact style to the entire menu
.side-menu.side-menu-miniApplies mini style to the entire menu
.side-menu.side-menu-no-gutterRemoves vertical margin from the menu items
.side-menu.side-menu-item-no-bgRemoves background colors from menu items on hover and when active
.side-menu.side-menu-on-darkApplies white colors to the entire menu for darker backgrounds
.side-menu.side-menu-no-gutterRemoves vertical margin from the menu items
.side-menu > .sn-section-headerHeading wrapper within the side menu
.side-menu > .sn-section-header > .sn-section-header-titleHeading title element within the header wrapper
.side-menu > .sn-menu-listApplies to the wrapper of a menu list within the side menu
.side-menu > .sn-menu-list > .sn-menu-item-wrapApplies to the wrapper of each menu item
.sn-menu-item-wrap > .sn-menu-item-contentApplies to the <a> element
.sn-menu-item-wrap > .sn-menu-item-content > .sn-menu-item-iconApplies to the icon if added to the menu item
.sn-menu-item-wrap > .sn-menu-item-content > .sn-menu-item-nameApplies to the actual text of the menu item
Customize variables at:/library/extend/components/_sidenav-menu.scss
Component's defaults:/library/components/sidenav-menu/_defaults.scss
NameDefault valueNote
$dx-sidenav-menu-section-header-height32px
$dx-sidenav-menu-section-header-padding0 10px
$dx-sidenav-menu-section-header-margin0 10px
$dx-sidenav-menu-section-title-colorui-surface-low
$dx-sidenav-menu-section-title-font-size12px
$dx-sidenav-menu-section-title-font-weight500
$dx-sidenav-menu-section-title-line-heightnull
$dx-sidenav-menu-section-title-uppercasetrue
$dx-sidenav-menu-item-heightauto
$dx-sidenav-menu-item-margin0 20px 2px 20px
$dx-sidenav-menu-item-padding8px 12px
$dx-sidenav-menu-item-border-radius4px
$dx-sidenav-menu-item-font-size14px
$dx-sidenav-menu-item-font-weightnull
$dx-sidenav-menu-item-transitionnull
$dx-sidenav-menu-item-colorui-surface-medium
$dx-sidenav-menu-item-icon-colorui-surface-low
$dx-sidenav-menu-item-icon-opacity1
$dx-sidenav-menu-item-icon-spacing12px
$dx-sidenav-menu-item-icon-transition200ms opacity, 200ms color
$dx-sidenav-menu-item-hover-backgroundmenu-item-hover-bg
$dx-sidenav-menu-item-hover-colorui-surface-medium
$dx-sidenav-menu-item-hover-icon-colormenu-item-hover-text-color
$dx-sidenav-menu-item-hover-icon-opacity1
$dx-sidenav-menu-item-active-backgroundmenu-item-active-bg
$dx-sidenav-menu-item-active-colorprimary-t-90
$dx-sidenav-menu-item-active-icon-colorprimary
$dx-sidenav-menu-item-active-icon-opacity1
$dx-sidenav-menu-on-dark-menu-section-title-colorrgba(255, 255, 255, 0.7);
$dx-sidenav-menu-on-dark-menu-item-backgroundtransparent;
$dx-sidenav-menu-on-dark-menu-item-colorrgba(255, 255, 255, 0.7);
$dx-sidenav-menu-on-dark-menu-item-hover-colorrgba(255, 255, 255, 1);
$dx-sidenav-menu-on-dark-menu-item-hover-bg-colorrgba(255, 255, 255, 0.08);
$dx-sidenav-menu-on-dark-menu-item-active-bg-colorrgba(255, 255, 255, 0.12);
$dx-sidenav-menu-on-dark-menu-item-active-colorrgba(255, 255, 255, 1);
$dx-sidenav-sm-menu-item-heightauto
$dx-sidenav-sm-menu-item-padding4px 8px
$dx-sidenav-sm-menu-item-margin0 20px 1px 20px
$dx-sidenav-lg-menu-item-font-size14px
$dx-sidenav-lg-menu-item-heightauto
$dx-sidenav-lg-menu-item-padding12px 18px
$dx-sidenav-lg-menu-item-margin0 20px 4px 20px
$dx-sidenav-tooltip-padding4px 8px;
$dx-sidenav-tooltip-border-radius4px;
$dx-sidenav-tooltip-bgtooltip-background;
$dx-sidenav-tooltip-colortooltip-color;
$dx-sidenav-tooltip-font-size12px;
$dx-sidenav-tooltip-font-weight500;
$dx-sidenav-submenu-popover-min-width15rem;
$dx-sidenav-submenu-popover-padding.5rem;
$dx-sidenav-submenu-popover-border-radius4px;
$dx-sidenav-submenu-popover-bgpopover-bg;
$dx-sidenav-submenu-popover-shadowpopover-shadow;
$dx-sidenav-submenu-popover-border-colorpopover-border-color;

Make sure to read the Customize components and Understanding and using the design system guides.

{title}