Drift Angular
Search…
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
Breadcrumbs
To use Breadcrumbs, first import
SharedModule
in your module.
1
import
{
SharedModule
}
from
'@gaxon/modules'
;
2
​
3
@
NgModule
({
4
...
5
imports
:
[
SharedModule
,
...
],
6
...
7
})
8
export
class
YourAppModule
{
9
}
Copied!
Breadcrumb with List
Preview
HTML
TypeScript
1
<
gx-breadcrumbs
[data]
=
"
breadcrumb
"
>
</
gx-breadcrumbs
>
Copied!
1
import
{
Component
}
from
'@angular/core'
;
2
​
3
@
Component
({
4
selector
:
'app-bs-breadcrumb'
,
5
templateUrl
:
'./bs-breadcrumb.component.html'
6
})
7
export
class
BsBreadcrumbComponent
{
8
breadcrumb
=
[
9
{
label
:
'Home'
},
10
{
label
:
'Library'
},
11
{
label
:
'Data'
,
active
:
true
}
12
];
13
​
14
constructor
()
{
}
15
​
16
}
Copied!
Breadcrumb with Nav
Preview
HTML
TypeScript
1
<
gx-breadcrumbs
displayAs
=
"
nav
"
[data]
=
"
breadcrumb
"
>
</
gx-breadcrumbs
>
Copied!
1
import
{
Component
}
from
'@angular/core'
;
2
​
3
@
Component
({
4
selector
:
'app-bs-breadcrumb'
,
5
templateUrl
:
'./bs-breadcrumb.component.html'
6
})
7
export
class
BsBreadcrumbComponent
{
8
breadcrumb
=
[
9
{
label
:
'Home'
},
10
{
label
:
'Library'
},
11
{
label
:
'Data'
,
active
:
true
}
12
];
13
​
14
constructor
()
{
}
15
​
16
}
Copied!
Components - Previous
Badges
Next - Components
Buttons
Last modified
2yr ago
Copy link
Contents
Breadcrumb with List
Breadcrumb with Nav