NavBar

A navbar, short for navigation bar, is a user interface element that enables movement between different sections of a website or application. It is usually displayed at the top of a page, but can also appear as a side or bottom bar. A navbar typically provides access to primary sections, branding, and utility features such as a search field or user account links.

Common components include a brand or logo, a set of navigation links, dropdown menus, a search control, and actions like login or shopping cart. Some designs include a secondary menu, language selector, or other utility links. Navigation items may be grouped into categories and arranged horizontally on wide screens or collapsed into a menu or drawer on smaller devices.

Behaviour and layout: a navbar can be static, fixed, or sticky. Modern layouts are responsive, adapting to varying widths by collapsing into a hamburger menu or a bottom tab bar. Accessibility considerations include using the nav element or role="navigation", semantic lists, keyboard operability, and ARIA attributes on collapsible menus.

Implementation notes: in HTML, a navbar is commonly constructed with a nav element containing a list of links. Styling via CSS controls alignment, spacing, color, and responsive behavior. Performance considerations include keeping markup lightweight and deferring nonessential scripts.

Variants and related concepts: side navigation (sidenav) and mega menus, as well as bottom navigation on mobile devices. In frameworks, components named Navbar are provided to standardize behavior and appearance.