Hamburger Menu

Inkline's hamburger menu is used to control opening and closing elements using various animation options.


Here’s an example of a basic use case for the <i-hamburger-menu> component. This component is usually used together with the Navbar Component and Sidebar Component to control their collapsed state.

Hamburger Menu Example


You can set the style of a <i-hamburger-menu> using the variant property, which can have a value of light or dark. By default, hamburger menus use the light variant.

Hamburger Menu Example

Component API

Here you can find a list of the various customization options you can use for the hamburger menu component as props.

Hamburger Menu API <i-hamburger-menu>
Property active
Type Boolean
Accepted true, false
Default false
Description Sets active state of the hamburger menu component.
Property animation
Type String
Default close
Accepted arrow-up, arrow-down, arrow-left, arrow-right, minus, plus
Description Sets the activation animation of the component.
Property variant
Type String
Accepted light, dark
Default light
Description Sets the color variant of the hamburger menu component.

Sass Variables

Here you can find a list of the Sass variables you can use for the hamburger menu component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Property $hamburger-menu-bar-width
Default 30px
Property $hamburger-menu-bar-height
Default 3px
Property $hamburger-menu-bar-border-radius
Default 2px
Property $hamburger-menu-bar-spacing
Default 5px
Property $hamburger-menu-bar-color
Default #000000
Property $hamburger-menu-padding
Default $spacer / 2
Property $hamburger-menu-opacity
Default 0.7
Property $hamburger-menu-hover-opacity
Default 1
Property $hamburger-menu-variants
Default ('monochrome')