https://github.com/pSkywalker/ez-nav
https://github.com/pSkywalker/ez-nav
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/pSkywalker/ez-nav
- Owner: pSkywalker
- License: mit
- Created: 2025-05-06T14:29:22.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-05-06T15:52:04.000Z (about 1 month ago)
- Last Synced: 2025-05-06T15:52:37.656Z (about 1 month ago)
- Language: TypeScript
- Size: 150 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ez-nav (⭐1) - A config-driven, responsive Angular navigation bar that integrates seamlessly with Bootstrap layouts. (Recently Updated / [May 10, 2025](/content/2025/05/10/README.md))
- awesome-angular - ez-nav - A config-driven, responsive Angular navigation bar that integrates seamlessly with Bootstrap layouts. (Table of contents / Third Party Components)
- fucking-awesome-angular - ez-nav - A config-driven, responsive Angular navigation bar that integrates seamlessly with Bootstrap layouts. (Table of contents / Third Party Components)
README
🧭 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