burgerpanels

Burgerpanels are a user interface design pattern referring to panels that are revealed or expanded by interacting with a hamburger icon. The term is informal and not part of a formal taxonomy, but it is used in design discussions to describe a class of collapsible interface panels that provide navigation, tools, or information in a compact form.

Typically, a burgerpanel is hidden off-canvas or collapsed on the initial render. When the user taps or activates the hamburger button, the panel slides into view, overlays the content, or pushes content aside to present its contents. It can contain navigation links, search fields, or actions, and may appear on the left, right, top, or bottom of the screen depending on the device and framework.

The concept aligns with broader patterns such as navigation drawers and off-canvas menus. The term "burgerpanel" emphasizes the trigger (the hamburger icon) rather than the layout, which can vary across devices and implementations. In many contexts, developers reference the same idea with terms like drawer, off-canvas, or slide-over panel.

Design considerations for burgerpanels include accessibility and usability. Provide keyboard operability, focus management or trapping when open, and ARIA attributes such as aria-expanded and aria-controls. Include a clear method to close the panel and ensure the content remains readable when the panel is visible. Content should be prioritized and concise to minimize disruption of the primary interface.

Related concepts include the hamburger menu, navigation drawer, off-canvas, and slide-over panels.