Hamburger Menu
Inkline’s hamburger menu is used to control opening and closing elements using various animation options.
Basic Example
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.
Color Variants
You can set the style of a <i-hamburger-menu>
using the color
property, which can have a value of light
or dark
. By default, hamburger menus have the light
color variant.
Animation
The <i-hamburger-menu>
menu component supports various closed state animations. You can choose a closed state icon using the animation
property.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
animation
Type'close' | arrow-up | arrow-down | arrow-left | arrow-right | 'plus' | 'minus'
Default'close'
Description The animation of the hamburger menu - Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the hamburger menu - Property
modelValue
TypeBoolean
Defaultfalse
Description Used to set the hamburger menu as opened or closed
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('dark')
Description The background of the hamburger-menu component - Property
----opacity
Value0.7
Description The opacity of the hamburger-menu component - Property
----opacity--hover
Value1
Description The opacity of the hamburger-menu component - Property
----padding-top
Valuecalc(var(--padding-top) / 2)
Description The padding top of the card component - Property
----padding-right
Valuecalc(var(--padding-right) / 2)
Description The padding right of the card component - Property
----padding-bottom
Valuecalc(var(--padding-bottom) / 2)
Description The padding bottom of the card component - Property
----padding-left
Valuecalc(var(--padding-left) / 2)
Description The padding left of the card component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the card component - Property
----bar--border-radius
Value2px
Description The border radius of the hamburger-menu component bars - Property
----bar--spacing
Value5px
Description The spacing between the hamburger-menu component bars - Property
----bar--width
Value30px
Description The width of the hamburger-menu component bars - Property
----bar--height
Value3px
Description The height of the hamburger-menu component bars