Prab: CSV import

2025-03-03T05:17:56Z

CSV import

← Older revision		Revision as of 05:17, 3 March 2025
Line 31:		Line 31:

	{{Comp-sci-stub}}		{{Comp-sci-stub}}
			== Hamburger button gallery ==
			<gallery>
			File:Hamburger icon.svg\|Hamburger icon
			File:Hamburger icon.svg\|Hamburger icon
			File:Xerox Star 8010 ViewPoint.jpg\|Xerox Star 8010 ViewPoint
			File:Microsoft Windows 1.0 screenshot.png\|Microsoft Windows 1.0 screenshot
			File:Editing Wikipedia mobile screenshot p 16, Penny Cyclopaedia with menu.png\|Editing Wikipedia mobile screenshot
			File:Kebab-menu-ui-icon-1.svg\|Kebab menu icon
			File:Grid icon.svg\|Grid icon
			</gallery>

Prab: CSV import

2024-03-19T06:33:06Z

CSV import

New page

'''Hamburger button''', often symbolized as three parallel horizontal lines resembling a hamburger, is a graphical user interface element used by web developers and designers to hide the navigation elements within applications or websites. Its design aims to provide a minimalist and efficient way to access menus, especially on devices with smaller screens, such as smartphones and tablets. The hamburger button has become a standard component of mobile user interface design, although its use and effectiveness are subjects of ongoing debate among designers.

==Origin and Design==
The origin of the hamburger button dates back to the 1980s, attributed to [[Norm Cox]], a designer for the [[Xerox Star]], one of the earliest graphical user interfaces. Cox designed the icon to be simple and functionally memorable, intending it to resemble a conventional menu list. Despite its early origins, the hamburger button did not gain widespread popularity until the advent of mobile computing, where screen space became a premium.

==Functionality==
The primary function of the hamburger button is to toggle the visibility of a site or application's navigation menu. When a user interacts with the button, typically by tapping or clicking, it either slides out a menu from the side of the screen or overlays the menu on top of existing content. This allows for a cleaner and more unobstructed view of the primary content until navigation is required.

==Criticism and Alternatives==
Despite its widespread adoption, the hamburger button has faced criticism from usability experts and designers. Critics argue that it hides important navigation links, making them less discoverable and potentially harming user experience. It is also suggested that the icon itself is not universally understood to represent a menu, leading to confusion among some users.

Alternatives to the hamburger button include tab bars, which are always visible and provide direct access to top-level navigation options, and "priority+" menus, which display the most important navigation options as visible buttons, relegating less critical links to a secondary menu.

==Implementation==
In web development, the hamburger button is typically implemented using HTML, CSS, and JavaScript. The button is created as an HTML element, styled with CSS to achieve the iconic appearance, and made interactive through JavaScript, which controls the menu's visibility.

==Accessibility==
Ensuring the accessibility of the hamburger menu is crucial. This includes providing appropriate aria-labels for screen readers, ensuring the menu can be navigated using keyboard shortcuts, and maintaining focus within the menu when it is open.

==See Also==
* [[User Interface Design]]
* [[Mobile Web Development]]
* [[Web Usability]]

==References==
<references />

[[Category:Graphical User Interface]]
[[Category:Web Design]]
[[Category:User Interface Elements]]

{{Comp-sci-stub}}

Hamburger button - Revision history

Prab: CSV import

Prab: CSV import