
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
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.
A config-driven, responsive Angular navigation bar that integrates seamlessly with Bootstrap layouts.
npm install ez-nav
✅ Requires Angular 19.2.0+
✅ Requires Bootstrap 5.0.0+
import { EzNavComponent } from 'ez-nav';
<ez-nav [header]="headerConfig"></ez-nav>
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 ). |
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;
}
MIT © DigitalCastle
FAQs
Did you know?
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.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.