navicon

Navicon is a term used in user interface design to describe the icon that controls navigation elements, usually placed in a header or app bar. The most familiar form is the hamburger icon, a symbol consisting of three parallel horizontal lines that suggests a menu. While navicon commonly refers to this three-line shape, the broader term covers any icon used to reveal or toggle navigation.

In responsive and mobile-first design, the navicon helps conserve screen space by hiding the full menu behind a button. When activated, it typically opens a navigation drawer or drop-down menu, and it may collapse back to the icon when the user selects an item or taps the area outside the menu. Designers often implement accessibility features such as a proper button role, descriptive aria-label attributes, and keyboard operability to ensure screen readers and non-mighted users can interact with it. Some implementations animate or morph the icon into a different symbol, such as an X, to indicate the open state.

Variants of navicons appear beyond the classic three-line hamburger. Alternatives include icons with rounded lines, vertical stacks, or different motifs like grids or chevrons, and some interfaces replace the icon with labeled buttons or text to improve clarity. While widely adopted for compact navigation, navicons can affect discoverability; designers may pair them with labels or use alternative navigation patterns in order to balance space efficiency with usability.

In practice, navicon remains a common shorthand in web and app design for a controllable navigation trigger, evolving with accessibility and interaction patterns across platforms.