Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page
  • Breadcrumb with List
  • Breadcrumb with Nav

Was this helpful?

  1. Components

Breadcrumbs

PreviousBadgesNextButtons

Last updated 5 years ago

Was this helpful?

To use Breadcrumbs, first import SharedModulein your module.

import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}

Breadcrumb with List

<gx-breadcrumbs [data]="breadcrumb"></gx-breadcrumbs>
import { Component} from '@angular/core';

@Component({
  selector: 'app-bs-breadcrumb',
  templateUrl: './bs-breadcrumb.component.html'
})
export class BsBreadcrumbComponent {
  breadcrumb = [
    {label: 'Home'}, 
    {label: 'Library'}, 
    {label: 'Data', active: true}
  ];

  constructor() { }

}

Breadcrumb with Nav

<gx-breadcrumbs displayAs="nav" [data]="breadcrumb"></gx-breadcrumbs>
import { Component} from '@angular/core';

@Component({
  selector: 'app-bs-breadcrumb',
  templateUrl: './bs-breadcrumb.component.html'
})
export class BsBreadcrumbComponent {
  breadcrumb = [
    {label: 'Home'}, 
    {label: 'Library'}, 
    {label: 'Data', active: true}
  ];

  constructor() { }

}