Hamburger

import { Hamburger } from '@bbc/front-end-kit/vue'

Animated hamburger component that transitions between open (hamburger lines) and close (cross) states. This component is purely presentational and built using HTML and CSS only.

Getting started

<template>
    <div>
        <Hamburger :active="isMenuOpen" @click="toggleMenu" />        
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Hamburger } from '@bbc/front-end-kit/vue'

const isMenuOpen = ref(false);

const toggleMenu = () => {
    isMenuOpen.value = !isMenuOpen.value;
};
</script>

Preview

API

Properties

active

Controls the visual state of the hamburger icon. When true, displays as a cross (X). When false, displays as hamburger lines.

Type: Boolean
Default: false

Events

The component emits standard button events (click, etc.) but does not handle state changes internally.

States

The component supports three visual states:

• Default: Three horizontal lines (hamburger icon)
• Active (--active class): Transforms into an X shape
• Hidden (--hidden class): Lines fade out with staggered animation delays. This class is not managed by the component — apply it manually from the parent when needed.

Styling

The component uses CSS custom properties for easy customization:

.hamburger {
    --hamburger-size-width: 1.5em;        /* Width of the hamburger button */
    --hamburger-size-height: 1em;         /* Height of the hamburger button */
    --hamburger-padding-v: 0;             /* Vertical padding around lines */
    --hamburger-padding-h: 0em;           /* Horizontal padding around lines */
    --hamburger-bar-thickness: 2px;       /* Thickness of each line */
}

Notes

• This is a presentational component only - it does not manage its own state
• You need to handle click events and state management in the parent component
• The component uses CSS transforms for smooth animations
• All styling is done through CSS custom properties for easy theming