Open In App

Angular PrimeNG Breadcrumb Styling

Last Updated : 26 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

A responsive website may be created with great ease using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style. In this article, we will learn how to style the Angular PrimeNG Breadcrumb Styling. 

The Breadcrumb Component offers the navigation link that is used to connect and display the user's previously visited pages in the hierarchy. Below, there are 4 structural styling classes are listed.

Angular PrimeNG Breadcrumb Styling:

  • p-breadcrumb: This class is for applying custom styling to the container element.
  • p-menuitem: This class is for applying custom styling to the menu item element.
  • p-menuitem-text: This class is for applying custom styling to the label of a menu item.
  • p-breadcrumb-chevron: This class is for applying custom styling to the chevron element.
 

Syntax:

<p-breadcrumb 
    [model]="..." 
    [home]="...">
</p-breadcrumb>

Creating Angular application and Installing the modules:

Step 1: Use the command below to create an Angular application.

ng new appname

Step 2: Use the following command to move to our project folder, appname, after creating it.

cd appname

Step 3: Install PrimeNG in the specified location.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like this once the installation is finished:

Steps to run the above application: Run the below command

ng serve --open

Example 1: This is a very basic example that explains how to style the Breadcrumb Component.

  • app.component.html:
HTML 
<h1>
    <span>
      <img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
        class="gfg-logo" alt="icon" />
      </span>
       
      <span style=
        "color: green; font-size: 40px;">
           GeeksforGeeks
      </span>
</h1>
<h3>PrimeNG Breadcrumb Styling</h3>
<p-breadcrumb [model]="gfg"></p-breadcrumb>
  • app.component.ts:
JavaScript 
import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    gfg: MenuItem[] = [];

    ngOnInit() {
        this.gfg = [
            { label: "AngularJS" },
            { label: "ReactJS" },
            { label: "HTML" },
            { label: "JavaScript" },
            { label: "PrimeNG" }
        ];
    }
}
  • app.module.ts:
JavaScript 
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { BreadcrumbModule } from "primeng/breadcrumb";

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule, 
        BrowserAnimationsModule, 
        BreadcrumbModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}
  • style.css:
CSS 
:host ::ng-deep .p-breadcrumb {
    background: #0da350 !important;
}
:host ::ng-deep .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
    color: #fff !important;
}
:host ::ng-deep .p-breadcrumb ul li .p-breadcrumb-chevron {
    color: #fff !important;
}
:host ::ng-deep .p-breadcrumb ul li:last-child .p-menuitem-text {
    color: #fff !important;
    font-weight: 600;
}

Output:

Example 2: In this example, we will learn how to use and style home property in the breadcrumb component.

  • app.component.html:
HTML 
<h1>
  <span>
    <img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
      class="gfg-logo" alt="icon"/>
  </span>
   
  <span style="color: green; font-size: 40px;">GeeksforGeeks </span>
</h1>
<h3>PrimeNG Breadcrumb Styling</h3>
<p-breadcrumb [model]="gfg" [home]="home"></p-breadcrumb>
  • app.component.ts:
JavaScript 
import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    gfg: MenuItem[] = [];
    home: MenuItem = {};

    ngOnInit() {
        this.gfg = [
            { label: "AngularJS" },
            { label: "ReactJS" },
            { label: "HTML" },
            { label: "JavaScript" },
            { label: "PrimeNG" }
        ];
        this.home = {
            icon: "pi pi-home",
            url: "https://www.geeksforgeeks.org"
        };
    }
}
  • app.module.ts:
JavaScript 
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { BreadcrumbModule } from "primeng/breadcrumb";

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule, 
        BrowserAnimationsModule, 
        BreadcrumbModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}
  • style.css:
CSS 
:host ::ng-deep .p-breadcrumb {
    background: #0da350 !important;
    display: flex;
    justify-content: center;
}
:host ::ng-deep .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
    color: #fff !important;
}
:host ::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron {
    color: #fff !important;
}

:host ::ng-deep .p-breadcrumb ul li:last-child .p-menuitem-text {
    color: #fff !important;
    font-weight: 600;
}
:host ::ng-deep .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
    color: #fff !important;
}
:host ::ng-deep .p-breadcrumb ul li .p-menuitem-link:focus {
    box-shadow: 0 0 0 0.2rem #0da350 !important;
}

Output:

Reference: https://primefaces.org/primeng/breadcrumb


Next Article
Angular PrimeNG ContextMenu Component

S
shubhanshuarya007
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox