NavIcon: React component

A simple yet effective component for creating hamburger menu icons that can toggle between active and inactive states. NavIcon is commonly used in responsive navigation interfaces to indicate the presence of a menu.

NavIcon

"use client";

import { NavIcon, Flex, Text, Row } from "@once-ui-system/core";
import { useState } from "react";

function NavIconToggle() {
  const [isActive, setIsActive] = useState(false);
  
  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <Column fillWidth>
      <Flex 
        paddingX="20" 
        paddingY="8" 
        background="surface"
        border="surface"
        radius="l" 
        horizontal="between" 
        vertical="center"
        fillWidth
      >
        <Logo icon="/trademarks/icon-dark.svg" />
        <NavIcon 
          active={isActive} 
          onClick={handleClick} 
          aria-label="Toggle navigation menu"
          aria-expanded={isActive}
          aria-controls="demo-nav"
        />
      </Flex>
      
      {isActive && (
        <Column 
          id="demo-nav"
          padding="16" 
          background="surface" 
          border="surface"
          radius="l" 
          marginTop="8"
          fillWidth
          gap="8"
        >
          <ToggleButton fillWidth horizontal="start" size="l">
            Home
          </ToggleButton>
          <ToggleButton fillWidth horizontal="start" size="l">
            Products
          </ToggleButton>
          <ToggleButton fillWidth horizontal="start" size="l">
            About
          </ToggleButton>
          <ToggleButton fillWidth horizontal="start" size="l">
            Contact
          </ToggleButton>
        </Column>
      )}
    </Column>
  );
}

States

NavIcon has two states: active and inactive, controlled by the active prop.

States

<NavIcon active={false} />
<NavIcon active={true} />

Customization

The NavIcon component accepts all the props of the Flex component, allowing for customization of size, spacing, and other properties.

Customization

<NavIcon 
  active={isActive} 
  onClick={handleClick}
  width="48"
  height="48"
  border="neutral-alpha-medium"
  background="neutral-strong"
  padding="8"
  radius="full"
/>

Props

	Type	Default
className	string	—
style	React.CSSProperties	—
onClick Called on press.	() => void	—
active Whether the menu is open. Drives which way the bars animate.	boolean	—
…and every FlexProps prop	inherited	—

Accessibility

The NavIcon component includes a tabIndex={0} by default, making it keyboard accessible. When implementing NavIcon in your application, consider the following accessibility best practices:

Add an aria-label or aria-labelledby attribute to describe the purpose of the button
Use aria-expanded to indicate the current state of the menu it controls
Ensure the menu that is toggled by the NavIcon is properly accessible

Accessibility

<NavIcon 
  active={isMenuOpen} 
  onClick={toggleMenu}
  aria-label="Toggle navigation menu"
  aria-expanded={isMenuOpen}
  aria-controls="mobile-nav"
/>