Appearance
Navbar
The FTNavbar is used to help people navigate the site with breadcrumbs allowing users to navigate up one or multiple levels.
Usage
Composition api (script setup)
vue
<script setup lang="ts">
import { FTNavbar } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTNavbar } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTNavbar } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTNavbar
}
}
</script><script>
import { FTNavbar } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTNavbar
}
}
</script>Navbar
Buttons
Create new
vue
<script lang="ts" setup>
const breadcrumbs = [
{
text: 'Contracts',
type: 'link',
link: { path: '/contracts' },
},
{
text: 'Create new',
type: 'text',
},
];
</script>
<template>
<FTNavbar :breadcrumbs="breadcrumbs"></FTNavbar>
</template><script lang="ts" setup>
const breadcrumbs = [
{
text: 'Contracts',
type: 'link',
link: { path: '/contracts' },
},
{
text: 'Create new',
type: 'text',
},
];
</script>
<template>
<FTNavbar :breadcrumbs="breadcrumbs"></FTNavbar>
</template>With Actions
Buttons
Create new
vue
<script lang="ts" setup>
const breadcrumbs = [
{
text: 'Contracts',
type: 'link',
link: { path: '/contracts' },
},
{
text: 'Create new',
type: 'text',
},
];
const actions = [
{
text: 'Action button',
type: 'button',
callback: () => {
alert('Click')
},
},
{
text: 'Action button',
type: 'button',
callback: () => {
alert('Click')
},
},
];
</script>
<template>
<FTNavbar :breadcrumbs="breadcrumbs" :actions="actions"></FTNavbar>
</template><script lang="ts" setup>
const breadcrumbs = [
{
text: 'Contracts',
type: 'link',
link: { path: '/contracts' },
},
{
text: 'Create new',
type: 'text',
},
];
const actions = [
{
text: 'Action button',
type: 'button',
callback: () => {
alert('Click')
},
},
{
text: 'Action button',
type: 'button',
callback: () => {
alert('Click')
},
},
];
</script>
<template>
<FTNavbar :breadcrumbs="breadcrumbs" :actions="actions"></FTNavbar>
</template>Props
There are two props with breadcrumbs being required.
| Name | Default | Description |
|---|---|---|
breadcrumbs | FTBreadcrumb[] | Display button in a loading state |
actions | FTBreadcrumbAction[] | Display button in a loading state |
FTBreadcrumb
| Name | Default | Description |
|---|---|---|
hidden | false | DWhether the breadcrumb should be hidden |
type | text | The type of breadcrumb. Possible values are options, link, or text |
options | [] | An array of options for the breadcrumb dropdown menu (applicable only if type is options) |
optionsButton | undefined | Display button in a loading state |
optionsBadge | undefined | Display button in a loading state |
callback | undefined | A callback function to be executed when the breadcrumb is clicked (applicable only if type is options or text) |
text | empty | The text to be displayed for the breadcrumb. |
link | undefined | The route location for the breadcrumb (applicable only if type is link) |
FTBreadcrumbAction
| Name | Default | Description |
|---|---|---|
type | false | The type of action. Possible values are icon or button |
active | false | Whether the action is active |
visible | true | Whether the action is visible |
disabled | false | Whether the action is disabled |
outlined | false | Whether the action is outlined. |
callback | undefined | A callback function to be executed when the breadcrumb is clicked (applicable only if type is options or text) |
Slots
| Name | Description |
|---|---|
custom-action | A slot placed before action buttons |