Side Navigation A fully featured, responsive side navigation component with expanded, compact, drawer modes and more
Enable Component
Enable the side navigation component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                sidenav: true // Enable sidenav component
            }
        }
    }
}
Basic Usage
Explore options and more examples from the previewer
The following previewer demonstrates the Side Navigation component but it also makes use of the Layout and Navbar components, in order to show a fully working example.
Property NameTypeDefaultDescription
compactBoolfalseEnables compact mode to be the default, requires HTML attribute data-sn-compact-width to be defined with the desired width of the compact mode to the sidenav base element
compactAutoExpandOnHoverBoolfalseEnables expanding compact side nav on hover, requires HTML attribute data-sn-width to be defined with the desired width of the default mode to the sidenav base element
compactAutoExpandDelayInt300Number of ms to wait until the sidenav expands from compact mode to default mode
compactSideContentSelectorString.layout-content-mainA CSS selector of the sibling content area that is placed right beside the navigation bar, this is used to apply margins when the compact sidenav is expanded on hover
drawerBoolfalseEnables drawer mode at all times, requires defining the trigger option to define which button will open the drawer
directionStringleftDefine the direction of the drawer
drawerPageOverlayBooltrueEnables placing an overlay over the entire content when the drawer is open
drawerCloseOnEscBooltrueEnables closing the drawer when the esc button is pressed
drawerCloseStringundefinedA CSS selector of a button within the sidenav that closes the drawer when clicked
triggerString.sn-triggerA CSS selector of the trigger button that toggles the sidenav visibility, drawer or compact mode based on the sidenav options
triggerModeStringtoggleTrigger mode, if set to toggle the visibility of the sidenav will be toggled, but if, set to compact the sidenav will be set to compact mode or default based on state
animationBooltrueEnable animation for drawer and compact expand on hover
animationDurationInt150Define animation duration
NameDescription
.sidenavBase class of the side navigation wrapper, added by javascript but it is recommended to be hardcoded as well
.sidenav > .sn-wrapBase class of the side navigation's inner content. required with h-100
.sidenav > .sn-wrap > .sn-headerBase class of the header section of the navigation bar
.sidenav > .sn-wrap > .sn-contentBase class of the main content of the navigation bar
.sidenav > .sn-wrap > .sn-footerBase class of the footer section of the navigation bar
.sidenav > .sn-wrap > .sn-at-expandAny element this class is applied to, will be shown when the side navigation is expanded
.sidenav > .sn-wrap > .sn-at-compactAny element this class is applied to, will be hidden on expand mode but shown on compact mode
Customize variables at:/library/extend/components/_sidenav.scss
Component's defaults:/library/components/sidenav/_defaults.scss
NameDefault valueNote
$dx-sidenav-init-animationtrue
$dx-sidenav-animation-duration500ms
$dx-sidenav-width280px
$dx-sidenav-padding-y0
$dx-sidenav-padding-x0
$dx-sidenav-backgroundnull
$dx-sidenav-colornull
$dx-sidenav-side-border-colorrgba(0, 0, 0, 0.08)
$dx-sidenav-border-radius0
$dx-sidenav-compact-width88px
$dx-sidenav-compact-padding-y0
$dx-sidenav-compact-padding-x0
$dx-sidenav-drawer-inittrue
$dx-sidenav-drawer-on-z-index2000
$dx-sidenav-drawer-on-box-shadow0 16px 10px 0 rgba(0,0,0, 0.14), 0 11px 18px 0 rgba(0,0,0, 0.12), 0 13px 5px -1px rgba(0,0,0, 0.2)
$dx-sidenav-header-backgroundnull
$dx-sidenav-header-colornull
$dx-sidenav-header-padding-y20px
$dx-sidenav-header-padding-x20px
$dx-sidenav-compact-header-padding-y20px
$dx-sidenav-compact-header-padding-x20px
$dx-sidenav-footer-backgroundnull
$dx-sidenav-footer-colornull
$dx-sidenav-footer-padding-y20px
$dx-sidenav-footer-padding-x20px
$dx-sidenav-compact-footer-padding-y20px
$dx-sidenav-compact-footer-padding-x20px
$dx-sidenav-content-padding20px 0
$dx-sidenav-content-marginnull
$dx-sidenav-compact-content-padding20px 0
$dx-sidenav-compact-content-marginnull
$dx-sidenav-page-overlay-z-index999
$dx-sidenav-page-overlay-background-color#000
$dx-sidenav-page-overlay-opacity0.3

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

{title}