sgh-navbar
Advanced tools
[](https://badge.fury.io/js/sgh-navbar) [](https://opensource.org/licenses/MIT)
A comprehensive Angular navigation library that provides a responsive sidebar navigation, toolbar with theme switching, breadcrumbs, and client management features.
✨ Rich Feature Set
npm install sgh-navbar
npm install @angular/material @angular/cdk @angular/animations @angular/forms
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SghNavbarModule } from 'sgh-navbar';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule, // Required for animations
SghNavbarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// app.component.ts
import { Component } from '@angular/core';
import {
SidenavData,
ToolbarData,
DEFAULT_SIDENAV_CONFIG,
DEFAULT_TOOLBAR_CONFIG
} from 'sgh-navbar';
@Component({
selector: 'app-root',
template: `
<lib-sgh-navbar
[sidenavData]="sidenavConfig"
[toolbarData]="toolbarConfig"
[expanded]="isNavExpanded"
[showBreadcrumbs]="true"
(toggleSidebarEvent)="onToggleSidebar($event)"
(searchInputEvent)="onSearch($event)"
(clientChange)="onClientChange($event)"
(subClientChange)="onSubClientChange($event)">
<!-- Your main content goes here -->
<div class="main-content">
<router-outlet></router-outlet>
</div>
</lib-sgh-navbar>
`
})
export class AppComponent {
isNavExpanded = false;
sidenavConfig: SidenavData = DEFAULT_SIDENAV_CONFIG;
toolbarConfig: ToolbarData = DEFAULT_TOOLBAR_CONFIG;
onToggleSidebar(expanded: boolean): void {
this.isNavExpanded = expanded;
}
onSearch(searchTerm: string): void {
console.log('Search:', searchTerm);
}
onClientChange(client: any): void {
console.log('Client changed:', client);
}
onSubClientChange(subClient: any): void {
console.log('Sub-client changed:', subClient);
}
}
// styles.scss or in your component
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
// Optional: Add Font Awesome for icons
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
// Basic layout styles
body {
margin: 0;
font-family: Roboto, sans-serif;
}
.main-content {
padding: 20px;
min-height: calc(100vh - 64px);
}
<lib-sgh-navbar>The primary component that wraps your entire application layout.
sidenavData: SidenavData - Configuration for sidebar navigationtoolbarData: ToolbarData - Configuration for toolbarexpanded: boolean - Controls sidebar expanded stateshowBreadcrumbs: boolean - Show/hide breadcrumb navigationtoggleSidebarEvent: EventEmitter<boolean> - Sidebar toggle eventssearchInputEvent: EventEmitter<string> - Search input eventsclientChange: EventEmitter<ClientListItem> - Client selection eventssubClientChange: EventEmitter<SubClientListItem> - Sub-client selection eventssidenavToggle: EventEmitter<any> - Sidenav toggle events<sgh-toolbar>Top navigation bar with logo, search, notifications, and user profile.
<sgh-sidenav>Collapsible sidebar navigation with multi-level menu support.
<sgh-sublevel-menu>Handles nested navigation menu items with animations.
<sgh-notification-list>Dropdown notification panel.
<sgh-menu-list-item>Individual menu item with expand/collapse functionality.
import { SidenavData, INavbarData } from 'sgh-navbar';
const customSidenavConfig: SidenavData = {
navData: [
{
label: 'Dashboard',
icon: 'dashboard',
routeLink: '/dashboard',
visible: true,
items: [
{
label: 'Analytics',
icon: 'analytics',
routeLink: '/dashboard/analytics',
visible: true
},
{
label: 'Reports',
icon: 'assessment',
routeLink: '/dashboard/reports',
visible: true,
items: [
{
label: 'Sales Report',
icon: '',
routeLink: '/dashboard/reports/sales',
visible: true
}
]
}
]
},
{
label: 'Users',
icon: 'people',
routeLink: '/users',
visible: true
},
{
label: 'Settings',
icon: 'settings',
routeLink: '/settings',
visible: true
}
],
bgColor: '#2c3e50',
imgSm: 'assets/logo-sm.png',
imgLg: 'assets/logo-lg.png',
activeRole: 'Administrator'
};
import { ToolbarData, ThemeOption, ClientListItem } from 'sgh-navbar';
const customToolbarConfig: ToolbarData = {
themeOptions: [
{
name: 'Dark Theme',
value: 'dark-theme',
checked: true
},
{
name: 'Light Theme',
value: 'light-theme',
checked: false
},
{
name: 'Blue Theme',
value: 'blue-theme',
checked: false
}
],
bgColor: '#1976d2',
img: 'assets/company-logo.svg',
searchEnable: true,
notificationEnable: true,
profileEnable: true,
settingsEnable: true,
profileView: false,
profileContent: `
<div class="profile-info">
<h4>John Doe</h4>
<p>Administrator</p>
<button class="btn-logout">Logout</button>
</div>
`,
clientConfigurationEnable: true,
applicationConfigurationEnable: true,
clientList: [
{
text: 'Acme Corporation',
value: 'ACME_CORP',
selected: true,
subClientList: [
{
text: 'Marketing Department',
value: 'MARKETING',
checked: true
},
{
text: 'Sales Department',
value: 'SALES',
checked: false
}
]
}
]
};
SidenavDatainterface SidenavData {
navData: INavbarData[];
bgColor: string;
imgSm: string;
imgLg: string;
client?: ClientListItem;
subclient?: SubClientListItem;
activeRole?: string;
}
INavbarDatainterface INavbarData {
routeLink: string;
icon: string;
label: string;
visible: boolean;
expanded?: boolean;
items?: INavbarData[];
customLinkCSS?: string;
}
ToolbarDatainterface ToolbarData {
themeOptions: ThemeOption[];
clientList?: ClientListItem[];
bgColor: string;
img: string;
searchEnable?: boolean;
notificationEnable?: boolean;
profileEnable?: boolean;
settingsEnable?: boolean;
profileView?: boolean;
profileContent?: string;
clientConfigurationEnable?: boolean;
applicationConfigurationEnable?: boolean;
isThemeCollapsed?: boolean;
isNotifNavCollapsed?: boolean;
}
import { Component } from '@angular/core';
import { SidenavData, ToolbarData } from 'sgh-navbar';
@Component({
selector: 'app-ecommerce',
template: `
<lib-sgh-navbar
[sidenavData]="sidenavConfig"
[toolbarData]="toolbarConfig"
[expanded]="navExpanded">
<router-outlet></router-outlet>
</lib-sgh-navbar>
`
})
export class EcommerceComponent {
navExpanded = false;
sidenavConfig: SidenavData = {
navData: [
{
label: 'Dashboard',
icon: 'dashboard',
routeLink: '/dashboard',
visible: true
},
{
label: 'Products',
icon: 'inventory',
routeLink: '/products',
visible: true,
items: [
{
label: 'All Products',
icon: 'list',
routeLink: '/products/list',
visible: true
},
{
label: 'Add Product',
icon: 'add',
routeLink: '/products/add',
visible: true
}
]
},
{
label: 'Orders',
icon: 'shopping_cart',
routeLink: '/orders',
visible: true
}
],
bgColor: '#1976d2',
imgSm: 'assets/logo-sm.png',
imgLg: 'assets/logo-lg.png'
};
toolbarConfig: ToolbarData = {
themeOptions: [
{ name: 'Blue Theme', value: 'blue-theme', checked: true },
{ name: 'Dark Theme', value: 'dark-theme', checked: false }
],
bgColor: '#1976d2',
img: 'assets/company-logo.svg',
searchEnable: true,
notificationEnable: true,
profileEnable: true,
settingsEnable: true
};
}
// custom-theme.scss
.my-custom-theme {
// Toolbar customization
.toolbar-main-wrapper {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
// Sidebar customization
.sgh-sidebar {
background: linear-gradient(180deg, #2c3e50 0%, #3498db 100%);
.sidebar_div a {
color: #ecf0f1;
transition: all 0.3s ease;
&:hover {
background: rgba(52, 152, 219, 0.2);
transform: translateX(5px);
}
&.item-active {
background: rgba(52, 152, 219, 0.3);
border-left: 4px solid #3498db;
}
}
}
}
// Make sure you have BrowserAnimationsModule imported
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule // Required for animations
]
})
<!-- Add Font Awesome to your index.html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
// Make sure to import Angular Material theme
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
// Ensure RouterModule is configured
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot(routes)
]
})
# Build the library
ng build sgh-navbar
# Build in watch mode
ng build sgh-navbar --watch
# Run unit tests
ng test sgh-navbar
# Run tests with coverage
ng test sgh-navbar --code-coverage
# Build the library
ng build sgh-navbar
# Navigate to dist folder
cd dist/sgh-navbar
# Publish to npm
npm publish
| Angular Version | Library Version | Description |
|---|---|---|
| 15 | 0.0.43 | Initial release |
| 16 | 0.0.50 | Angular 16 support |
| 17 | 0.0.51 | Angular 17 support |
| 18 | 0.0.52 | Angular 18 support |
| 19 | 0.0.54 | Angular 19 support, Major fixes and improvements |
| 19 | 0.0.57 | Enhanced layout behavior, responsive design improvements |
This project is licensed under the MIT License.
Made with ❤️ by the SGH Team
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.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.