🧭 ez-nav

A config-driven, responsive Angular navigation bar that integrates seamlessly with Bootstrap layouts.

✨ Features

📱 Mobile-first responsive design
🧩 Easily toggled mobile nav drawer
🔽 Dropdown support with subnav items
🎨 Full class-based customization for layout & styles
🧠 Simple, declarative config-driven structure

📦 Installation

npm install ez-nav

✅ Requires Angular 19.2.0+

✅ Requires Bootstrap 5.0.0+

🚀 Usage

1. Import the component

import { EzNavComponent } from 'ez-nav';

2. Use in your component template

<ez-nav [header]="headerConfig"></ez-nav>

⚙️ Configuration Example

public headerConfig: HeaderConfig = {
  wrappingClass: ["container-fluid"],
  parentRowLogoClasses: ["col-md-8", "col-sm-8", "col-10", "logoPadding"],
  parentNavItemsClasses: ["col-md-4", "col-sm-4", "col-2", "navBarPadding"],
  logo: {
    src: 'assets/your-logo.png',
    alt: 'Company Logo',
    imageClassNames: ['img-fluid']
  },
  navRow: {
    drawerIconOpen: ['bi', 'bi-filter-right', 'drawerIcon'],
    drawerIconClosed: ['bi', 'bi-filter-left', 'drawerIcon'],
    items: [
      {
        title: '🏠 Home',
        route: '/',
        gridClasses: ["col-md-2", "col-sm-2"],
        anchorTagClass: ['nav-link'],
        anchorTagClassMobile: ['mobile-item']
      },
      {
        title: '🛍️ Products',
        route: '/products',
        gridClasses: ["col-md-2", "col-sm-2"],
        anchorTagClass: ['nav-link'],
        anchorTagClassMobile: ['mobile-item']
      },
      {
        title: '🛠️ Services',
        route: '/services',
        gridClasses: ["col-md-2", "col-sm-2"],
        anchorTagClass: ['nav-link'],
        anchorTagClassMobile: ['mobile-item'],
        dropDownParentClasses: ['dropdown'],
        subNavOpenClasses: ["bi", "bi-caret-up-fill"],
        subNavCloseClasses: ["bi", "bi-caret-down-fill"],
        subNav: [
          {
            title: "💬 Consulting",
            route: "/services/consulting",
            cssClasses: ["dropdown-item"]
          },
          {
            title: "💻 Development",
            route: "/services/development",
            cssClasses: ["dropdown-item"]
          }
        ]
      },
      {
        title: '📞 Contact',
        route: '/contact',
        gridClasses: ["col-md-2", "col-sm-2"],
        anchorTagClass: ['nav-link'],
        anchorTagClassMobile: ["mobile-item"]
      }
    ]
  }
};

Parameter	Type	Description
`wrappingClass`	`string[]`	Classes applied to the wrapper element (e.g., `container-fluid`).
`parentRowLogoClasses`	`string[]`	Classes applied to the parent row for the logo (e.g., `col-md-8`, `logoPadding`).
`parentNavItemsClasses`	`string[]`	Classes applied to the parent row for the navigation items (e.g., `col-md-4`, `navBarPadding`).
logo
`logo.src`	`string`	Path to the logo image (e.g., `assets/your-logo.png`).
`logo.alt`	`string` (optional)	Alt text for the logo image (e.g., `Company Logo`).
`logo.imageClassNames`	`string[]`	Classes applied to the logo image (e.g., `img-fluid`).
navRow
`navRow.drawerIconOpen`	`string[]`	Classes for the icon when the drawer is open (e.g., `bi`, `bi-filter-right`, `drawerIcon`).
`navRow.drawerIconClosed`	`string[]`	Classes for the icon when the drawer is closed (e.g., `bi`, `bi-filter-left`, `drawerIcon`).
`navRow.items`	`object[]`	List of navigation items.
`navRow.items.title`	`string`	The title of the navigation item (e.g., `🏠 Home`).
`navRow.items.route`	`string`	The route path for the navigation item (e.g., `/`).
`navRow.items.gridClasses`	`string[]`	Grid classes for responsive layout of the navigation item (e.g., `col-md-2`, `col-sm-2`).
`navRow.items.anchorTagClass`	`string[]`	Classes applied to the anchor tag for the item (e.g., `nav-link`).
`navRow.items.anchorTagClassMobile`	`string[]`	Classes applied to the anchor tag for mobile devices (e.g., `mobile-item`).
`navRow.items.dropDownParentClasses`	`string[]` (optional)	Classes applied to the parent element of a dropdown menu (e.g., `dropdown`).
`navRow.items.subNavOpenClasses`	`string[]` (optional)	Classes for the icon indicating that the sub-navigation is open (e.g., `bi`, `bi-caret-up-fill`).
`navRow.items.subNavCloseClasses`	`string[]` (optional)	Classes for the icon indicating that the sub-navigation is closed (e.g., `bi`, `bi-caret-down-fill`).
`navRow.items.subNav`	`object[]` (optional)	List of submenu items for a navigation item with a dropdown.
`navRow.items.subNav.title`	`string`	The title of a sub-navigation item (e.g., `💬 Consulting`).
`navRow.items.subNav.route`	`string`	The route path for a sub-navigation item (e.g., `/services/consulting`).
`navRow.items.subNav.cssClasses`	`string[]`	CSS classes applied to the sub-navigation item (e.g., `dropdown-item`).

🎨 Styling Tips

To ensure proper styling, include Bootstrap's CSS in your project:

@import 'bootstrap/dist/css/bootstrap.min.css';

Important: All custom styles for this component should be placed in your project's root style.css file. Here are a few examples:

.logoPadding {
  padding: 10px;
}
.drawerIcon {
  font-size: 1.5rem;
  cursor: pointer;
}

📚 Dependencies

Angular 19.2.0+
Bootstrap 5.0.0

JSPM

ez-nav

Package Exports

Readme