Hamburger Menu

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

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 :active="active" @click="active = !active" />

export default {
    data () {
        return {
            active: false
        };
    }
}

Variants

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.

<i-hamburger-menu variant="light" :active="active" @click="active = !active" />

<i-hamburger-menu variant="dark" :active="active" @click="active = !active" />

export default {
    data () {
        return {
            active: false
        };
    }
}

Component API

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

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.

(
    light: $hamburger-menu-variant-light,
    dark: $hamburger-menu-variant-dark
)

@function hamburger-menu-variant($variant) {
    $hamburger-menu-variant-background: $variant;

    $variant-map: (
        background: $hamburger-menu-variant-background
    );

    @return $variant-map;
}