# Navbar Navbar provides primary navigation and access to key areas of an application or website. It supports branding, navigation, and important user actions. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-navbar--introduction ## Variants documented in Storybook - Navbar Type: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-navbar--navbar-type - Navbar Pill: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-navbar--navbar-pill ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Navbar. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

Navbar

Navbar provides primary navigation and access to key areas of an application or website. It supports branding, navigation, and important user actions.

Implementation Showcase

Visual demonstration of various Navbar variants including Default, Pill, and Extended styles.

Navbar

Navbar Pill

Extended Navbar

CSS Class Reference

Quickly copy layout and utility classes for Navbars.

Structural Classes

Base Navbar ux4g-navbar
Layout Wrapper ux4g-navbar-wrap
Logo Height ux4g-navbar-logo
Navigation List ux4g-navbar-links

Variant Utilities

Right Aligned ux4g-navbar-right
Pill Shaped ux4g-radius-full
Vertical Divider ux4g-divider-vertical
Horizontal Divider ux4g-divider-horizontal
``` React: ```jsx import React from 'react'; const NavbarExample1Demo = () => ( <>
Components

Navbar

Navbar provides primary navigation and access to key areas of an application or website. It supports branding, navigation, and important user actions.

Implementation Showcase

Visual demonstration of various Navbar variants including Default, Pill, and Extended styles.

Navbar

Navbar Pill

Extended Navbar

CSS Class Reference

Quickly copy layout and utility classes for Navbars.

{/* Structural Classes */}

Structural Classes

Base Navbar ux4g-navbar
Layout Wrapper ux4g-navbar-wrap
Logo Height ux4g-navbar-logo
Navigation List ux4g-navbar-links
{/* Variant Utilities */}

Variant Utilities

Right Aligned ux4g-navbar-right
Pill Shaped ux4g-radius-full
Vertical Divider ux4g-divider-vertical
Horizontal Divider ux4g-divider-horizontal
); export default NavbarExample1Demo; ``` Angular: ```html
Components

Navbar

Navbar provides primary navigation and access to key areas of an application or website. It supports branding, navigation, and important user actions.

Implementation Showcase

Visual demonstration of various Navbar variants including Default, Pill, and Extended styles.

Navbar

Navbar Pill

Extended Navbar

CSS Class Reference

Quickly copy layout and utility classes for Navbars.

Structural Classes

Base Navbar ux4g-navbar
Layout Wrapper ux4g-navbar-wrap
Logo Height ux4g-navbar-logo
Navigation List ux4g-navbar-links

Variant Utilities

Right Aligned ux4g-navbar-right
Pill Shaped ux4g-radius-full
Vertical Divider ux4g-divider-vertical
Horizontal Divider ux4g-divider-horizontal
``` ### 2. Navbar Pill — Right Aligned Navbar Pill HTML: ```html ``` React: ```jsx import React from 'react'; const NavbarExample2Demo = () => ( <> ); export default NavbarExample2Demo; ``` Angular: ```html ``` ### 3. Navbar Pill — Navbar Pill HTML: ```html ``` React: ```jsx import React from 'react'; const NavbarExample3Demo = () => ( <> ); export default NavbarExample3Demo; ``` Angular: ```html ``` ### 4. Navbar Type — Default HTML: ```html ``` React: ```jsx import React from 'react'; const NavbarExample4Demo = () => ( <> ); export default NavbarExample4Demo; ``` Angular: ```html ``` ### 5. Navbar Type — With Multiple Button HTML: ```html ``` React: ```jsx import React from 'react'; const NavbarExample5Demo = () => ( <> ); export default NavbarExample5Demo; ``` Angular: ```html ``` ### 6. Navbar Type — Post Login HTML: ```html ``` React: ```jsx import React from 'react'; const NavbarExample6Demo = () => ( <> ); export default NavbarExample6Demo; ``` Angular: ```html ``` ### 7. Navbar Type — With Hamburger HTML: ```html ``` React: ```jsx import React from 'react'; const NavbarExample7Demo = () => ( <> ); export default NavbarExample7Demo; ``` Angular: ```html ``` ### 8. Navbar Type — Right Aligned HTML: ```html ``` React: ```jsx import React from 'react'; const NavbarExample8Demo = () => ( <> ); export default NavbarExample8Demo; ``` Angular: ```html ``` ### 9. Navbar Type — Extended HTML: ```html ``` React: ```jsx import React from 'react'; const NavbarExample9Demo = () => ( <> ); export default NavbarExample9Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.