Angular PrimeNG Breadcrumb Styling

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