SponsorsBecome a sponsor
- Get Started
- Vue Components
- App
- Accordion
- Action Sheet / Actions
- Appbar
- Area Chart
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Button
- List Index
- List Item
- Login Screen
- Menu
- Menu List
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Skeleton
- Smart Select
- Sortable
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Toggle
- Toolbar / Tabbar
- Treeview
- View
- Virtual List
Breadcrumbs Vue Component
Breadcrumbs Vue component represents Framework7's Breadcrumbs component.
Breadcrumbs Components
There are following components included:
f7-breadcrumbsf7-breadcrumbs-itemf7-breadcrumbs-separatorf7-breadcrumbs-collapsed
Breadcrumbs Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-breadcrumbs-item> properties | |||
| active | boolean | Marks breadcrumb item as active/current (usually last item in breadcrumbs) | |
Breadcrumbs Events
| Event | Description |
|---|---|
| <f7-breadcrumbs-item> events | |
| click | Fires on breadcrumbs item click |
| <f7-breadcrumbs-collapsed> events | |
| click | Fires on breadcrumbs collapsed click |
Examples
<template>
<f7-page>
<f7-navbar title="Breadcrumbs"></f7-navbar>
<f7-block-title>Basic</f7-block-title>
<f7-block strong>
<f7-breadcrumbs>
<f7-breadcrumbs-item>
<f7-link>Home</f7-link>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item>
<f7-link>Catalog</f7-link>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item active>Phones</f7-breadcrumbs-item>
</f7-breadcrumbs>
</f7-block>
<f7-block-title>Scrollable</f7-block-title>
<f7-block-header
>Breadcrumbs will be scrollable if they don't fit the screen</f7-block-header
>
<f7-block strong>
<f7-breadcrumbs>
<f7-breadcrumbs-item>
<f7-link>Home</f7-link>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item>
<f7-link>Catalog</f7-link>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item>
<f7-link>Phones</f7-link>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item>
<f7-link>Apple</f7-link>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
</f7-breadcrumbs>
</f7-block>
<f7-block-title>Collapsed</f7-block-title>
<f7-block strong>
<f7-breadcrumbs>
<f7-breadcrumbs-item>
<f7-link>Home</f7-link>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-collapsed class="popover-open" data-popover=".breadcrumbs-popover">
<f7-popover class="breadcrumbs-popover" style="width: 120px">
<f7-list>
<f7-list-item link title="Catalog" popover-close />
<f7-list-item link title="Phones" popover-close />
<f7-list-item link title="Apple" popover-close />
</f7-list>
</f7-popover>
</f7-breadcrumbs-collapsed>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
</f7-breadcrumbs>
</f7-block>
<f7-block-title>With Icons</f7-block-title>
<f7-block strong>
<f7-breadcrumbs>
<f7-breadcrumbs-item>
<f7-link
icon-ios="f7:house_fill"
icon-aurora="f7:house_fill"
icon-md="material:home"
text="Home"
/>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item>
<f7-link
icon-ios="f7:square_list_fill"
icon-aurora="f7:square_list_fill"
icon-md="material:list_alt"
text="Catalog"
/>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item>
<f7-link
icon-ios="f7:device_phone_portrait"
icon-aurora="f7:device_phone_portrait"
icon-md="material:smartphone"
text="Phones"
/>
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item>
<f7-link icon-f7="logo_apple" text="Apple" />
</f7-breadcrumbs-item>
<f7-breadcrumbs-separator />
<f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
</f7-breadcrumbs>
</f7-block>
</f7-page>
</template>