You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

ez-nav

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ez-nav

A responsive, configurable Angular navigation bar component with support for dropdown menus, mobile drawer toggles, and custom layouts. Easily integrate a dynamic navbar using a simple configuration object.

0.0.6
latest
Source
npmnpm
Version published
Weekly downloads
3
Maintainers
1
Weekly downloads
 
Created
Source

🧭 ez-nav

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

npm version npm downloads license angular compatibility bootstrap version

✨ 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"]
      }
    ]
  }
};
ParameterTypeDescription
wrappingClassstring[]Classes applied to the wrapper element (e.g., container-fluid).
parentRowLogoClassesstring[]Classes applied to the parent row for the logo (e.g., col-md-8, logoPadding).
parentNavItemsClassesstring[]Classes applied to the parent row for the navigation items (e.g., col-md-4, navBarPadding).
logo
logo.srcstringPath to the logo image (e.g., assets/your-logo.png).
logo.altstring (optional)Alt text for the logo image (e.g., Company Logo).
logo.imageClassNamesstring[]Classes applied to the logo image (e.g., img-fluid).
navRow
navRow.drawerIconOpenstring[]Classes for the icon when the drawer is open (e.g., bi, bi-filter-right, drawerIcon).
navRow.drawerIconClosedstring[]Classes for the icon when the drawer is closed (e.g., bi, bi-filter-left, drawerIcon).
navRow.itemsobject[]List of navigation items.
navRow.items.titlestringThe title of the navigation item (e.g., 🏠 Home).
navRow.items.routestringThe route path for the navigation item (e.g., /).
navRow.items.gridClassesstring[]Grid classes for responsive layout of the navigation item (e.g., col-md-2, col-sm-2).
navRow.items.anchorTagClassstring[]Classes applied to the anchor tag for the item (e.g., nav-link).
navRow.items.anchorTagClassMobilestring[]Classes applied to the anchor tag for mobile devices (e.g., mobile-item).
navRow.items.dropDownParentClassesstring[] (optional)Classes applied to the parent element of a dropdown menu (e.g., dropdown).
navRow.items.subNavOpenClassesstring[] (optional)Classes for the icon indicating that the sub-navigation is open (e.g., bi, bi-caret-up-fill).
navRow.items.subNavCloseClassesstring[] (optional)Classes for the icon indicating that the sub-navigation is closed (e.g., bi, bi-caret-down-fill).
navRow.items.subNavobject[] (optional)List of submenu items for a navigation item with a dropdown.
navRow.items.subNav.titlestringThe title of a sub-navigation item (e.g., 💬 Consulting).
navRow.items.subNav.routestringThe route path for a sub-navigation item (e.g., /services/consulting).
navRow.items.subNav.cssClassesstring[]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

Keywords

angular

FAQs

Package last updated on 06 May 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts