The Breadcrumb control serves as a navigational aid, helping users identify their current page location within the hierarchical structure of a website or list.
const items = [
{ text: "Home", url: "/demos" },
{ text: "JavaScript", url: "/demos/javascript" },
{ text: "Components", url: "/demos/javascript/components" },
{ text: "Navigations", url: "/demos/javascript/components/nagivations" },
{ text: "Breadcrumb", url: "/demos/javascript/components/nagivations/breadcrumb" }
];
new ac.navigations.Breadcrumb(
{
items: items,
enableNavigation: false
},
"#cntlDefaultBreadcrumb"
);<div id="cntlDefaultBreadcrumb"></div>*/ Collapsed */
new ac.navigations.Breadcrumb(
{
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: "Collapsed"
},
"#cntlOverflowCollapsed"
);
*/ Menu */
new ac.navigations.Breadcrumb(
{
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: "Menu"
},
"#cntlOverflowMenu"
);
*/ Hidden */
new ac.navigations.Breadcrumb(
{
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: "Hidden"
},
"#cntlOverflowHidden"
);
*/ Wrap */
new ac.navigations.Breadcrumb(
{
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: "Wrap"
},
"#cntlOverflowWrap"
);
*/ Scroll */
new ac.navigations.Breadcrumb(
{
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: "Scroll"
},
"#cntlOverflowScroll"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Collapsed</label>
<div class="col-lg-8">
<div id="cntlOverflowCollapsed"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Menu</label>
<div class="col-lg-8">
<div id="cntlOverflowMenu"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Hidden</label>
<div class="col-lg-8">
<div id="cntlOverflowHidden"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Wrap</label>
<div class="col-lg-8">
<div id="cntlOverflowWrap"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Scroll</label>
<div class="col-lg-8">
<div id="cntlOverflowScroll"></div>
</div>
</div>
</div>