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.

<i-hamburger-menu v-model="active" />

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.

<i-hamburger-menu color="light" v-model="active" />

<i-hamburger-menu color="dark" v-model="active" />

Animation

The <i-hamburger-menu> menu component supports various closed state animations. You can choose a closed state icon using the animation property.

<i-hamburger-menu animation="close" v-model="active" />

<i-hamburger-menu animation="arrow-up" v-model="active" />

<i-hamburger-menu animation="arrow-down" v-model="active" />

<i-hamburger-menu animation="arrow-left" v-model="active" />

<i-hamburger-menu animation="arrow-right" v-model="active" />

<i-hamburger-menu animation="minus" v-model="active" />

<i-hamburger-menu animation="plus" v-model="active" />

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