Angular PrimeNG Menubar Styling
Last Updated :
30 Dec, 2022
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Menubar Styling.
The MenuBar component is a horizontal menu component like a navbar on websites or the top menu bar in desktop applications. We can place the navigation items or some functionalities in the navbars. The Menubar styling allows us to customize the default styling of the menubar using the classes so that we can create a custom design.
Angluar PrimeNG Menubar Styling:
- p-menubar: It is the container element.
- p-menu-list: It is a list element.
- p-menuitem: It is the menuitem element.
- p-menuitem-text: It is the label of a menuitem.
- p-menuitem-icon: It is the icon of a menuitem.
- p-submenu-icon: It is the arrow icon of a submenu.
Syntax:
:host ::ng-deep .p-menubar {
// CSS Styling
}
Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command.
ng new geeks_angular
Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.
cd geeks_angular
Step 3: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: The project structure will look like the following:
Steps to run the application: Run the below command to see the output
ng serve --open
Example 1: In the following example, we have a Menubar with a border and shadow around it.
HTML
<h1 style="color: green; text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG MenuBar Styling</h3>
<p-menubar [model]="items"></p-menubar>
|
CSS
:host ::ng-deep .p-menubar {
border: 1px green;
border-style: solid;
border-radius: 20px;
box-shadow: 0px 4px 6px 0px green;
}
|
Javascript
import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
import { PrimeNGConfig, MenuItem } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
providers: [MessageService]
})
export class AppComponent {
constructor(
private messageService: MessageService,
private primengConfig: PrimeNGConfig
) {}
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: "Data Structures",
items: [
{
label: "Linked List",
items: [
{ label: "Singly Linked List" },
{ label: "Doubly Linked List" }
]
},
{ label: "Array" },
{ label: "Stack" }
]
},
{
label: "Algorithms",
items: [
{ label: "Binary Searching" },
{ label: "Merge Sort" }
]
}
];
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
|
Javascript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { MenubarModule } from "primeng/menubar";
import { AppComponent } from "./app.component";
import { ImageModule } from "primeng/image";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ImageModule,
MenubarModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Output:
Example 2: In the following example, we have customized the menu item as well.
HTML
<h1 style="color: green; text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG MenuBar Styling</h3>
<p-menubar [model]="items"></p-menubar>
|
CSS
:host ::ng-deep .p-menubar {
border: 1px green;
border-style: solid;
border-radius: 20px;
box-shadow: 0px 4px 6px 0px green;
}
:host ::ng-deep .p-menuitem {
background-color: rgb(173, 255, 106);
margin: 12px;
}
|
Javascript
import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
import { PrimeNGConfig, MenuItem } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
providers: [MessageService]
})
export class AppComponent {
constructor(
private messageService: MessageService,
private primengConfig: PrimeNGConfig
) {}
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: "Data Structures",
items: [
{
label: "Linked List",
items: [
{ label: "Singly Linked List" },
{ label: "Doubly Linked List" }
]
},
{ label: "Array" },
{ label: "Stack" }
]
},
{
label: "Algorithms",
items: [
{ label: "Binary Searching" },
{ label: "Merge Sort" }
]
}
];
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
|
Javascript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { MenubarModule } from "primeng/menubar";
import { AppComponent } from "./app.component";
import { ImageModule } from "primeng/image";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ImageModule,
MenubarModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Output:
Reference: http://primefaces.org/primeng/menubar
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...