Angular Universal Navbar
Suported Angular versions: 17.
Click here to try it on StackBlitz
Usage
Add the package as a dependency to your project using:
npm install angular-universal-navbar
Add module to you app.module imports:
import { AngularUniversalNavbarComponent, NavItem } from 'angular-universal-navbar';
...
@Component({
selector: 'app-root',
standalone: true,
imports: [AngularUniversalNavbarComponent],
...
})Define navbar items in the component(OPTIONAL) If you do not define the navbar items the navbar will not be shown:
navItems = [
{
name: 'First',
route: 'first',
styles: {
marginLeft: 'auto'
},
},
{
name: 'Second',
children: [
{
name: 'Second First',
route: 'second-first'
},
{
name: 'Second Second',
route: 'second-second'
},
],
},
{
name: 'Fifth',
styles: {
marginRight: 'auto'
},
classes: [
'your-custom-class'
],
},
{
component: SettingsComponent,
},
{
component: UserComponent,
componentData: {
user: 'NV'
}
},
];In the component template add selector and pass the navbar items. Also, inside selector add router-outlet or any app content you wish.
<angular-universal-navbar
[navItems]="navItems"
>
<router-outlet></router-outlet>
</angular-universal-navbar>Define sidebar items in the component(OPTIONAL) If you do not define the sidebar items the sidebar will not be shown:
sideItems: NavItem[] = [
{
component: LogoComponent,
styles: {
marginTop: '5px',
marginBottom: '50px'
},
},
{
name: 'Sidebar first',
route: 'first',
},
{
name: 'Sidebar third',
route: 'third'
},
{
name: 'Sidebar fourth',
route: 'fourth'
},
{
name: 'Sidebar fifth',
},
];In the component template add selector and pass the sidebar items. Also, inside selector add router-outlet or any app content you wish.
<angular-universal-navbar
[sideItems]="sideItems"
>
<router-outlet></router-outlet>
</angular-universal-navbar>Navitem is defined as follows.
export interface NavItem {
name?: string;
route?: string;
children?: NavItem[];
component?: Type<any>;
componentData?: any;
styles?: {[key: string]: string};
classes?: string[];
}There are three possible options:
- Define only name and route which will result as default navbar item as a text field:
{
name: 'Third',
route: 'third'
},- Define name and its children and it will result as dropdown:
{
name: 'Second',
children: [
{
name: 'Second First',
route: 'second-first'
},
{
name: 'Second Second',
route: 'second-second'
},
],
},- Create custom component and render it inside navbar.
{
component: UserComponent,
componentData: {
user: 'NV'
}
},You are able to pass data to custom component, shown above which is equivalent to this:
<app-user
user="NV"
/>For all options, you are able to pass custom classes and styles:
{
name: 'Fifth',
styles: {
marginRight: 'auto'
},
classes: [
'your-custom-class'
],
},You can change styles directly in your global styles file (styles.css or styles.scss).
.universal-navbar .active, .universal-sidebar .active{
color: black !important;
background-color: rgb(234, 233, 233) !important;
}
.your-custom-class{
background-color: burlywood;
}