ez-nav

🧭 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

📜 License

MIT © DigitalCastle