
Research
/Security News
Toptal’s GitHub Organization Hijacked: 10 Malicious Packages Published
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
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.
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.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.