Flux

Appearance

Dashboard navigation ​

The dashboard navigation component provides the main navigation area of the dashboard. It typically contains links or icons that allow users to switch between different sections or views. The navigation can be collapsed or expanded, ensuring a clean and flexible layout that adapts to the available space.

Required icons

bars
ellipsis-h

Props

logo-location?: FluxTo
The route of the logo.

Slots

default
The. navigation items.

logo
The content of the navigation logo.

Snippet ​

vue
<template>
    <FluxDashboardNavigation>
        <template #logo>
            <!-- Optional slot for the logo. -->
        </template>

        <FluxMenu>
            <!-- Menu items here. -->
        </FluxMenu>
    </FluxDashboardNavigation>
</template>

<script
    setup
    lang="ts">
    import { FluxDashboardNavigation } from '@flux-ui/dashboard';
    import { FluxMenu } from '@flux-ui/components';
</script>

Custom ​

To collapse the navigation, you will need to create a component that will handle the logic of the collapse and navigation.

vue
<template>
    <FluxDashboard>
        <template #navigation>
            <Navigation/>
        </template>
    </FluxDashboard>
</template>

<script
    setup
    lang="ts">
    import { FluxDashboard } from '@flux-ui/dashboard';
    import Navigation from './navigation.vue';
</script>
vue
<template>
    <FluxDashboardNavigation>
        <FluxMenu>
            <FluxMenuItem
                type="route"
                v-for="route in routes"
                :label="route.title"
                :to="{ name: route.name }"
                @click="closeNavigation"/>

            <FluxSpacer/>

            <FluxMenuItem
                :icon-leading="collapseIcon"
                :label="isNavigationCollapsed ? 'Expand' : 'Collapse'"/>
        </FluxMenu>
    </FluxDashboardNavigation>
</template>

<script
    setup
    lang="ts">
    import { FluxDashboardNavigation, useDashboardInjection } from '@flux-ui/dashboard';
    import { FluxMenu, FluxMenuItem, FluxSpacer } from '@flux-ui/components';
    import { computed } from 'vue';

    const routes = [
        {title: 'Home', name: 'Home'},
        {title: 'About', name: 'About'},
        {title: 'Contact', name: 'Contact'},
        {title: 'Settings', name: 'Settings'},
    ];

    const { isNavigationCollapsed } = useDashboardInjection();

    const collapseIcon = computed(() => isNavigationCollapsed.value ? "angle-left" : "angle-right");

    function closeNavigation(): void {
        isNavigationCollapsed.value = true;
    }
</script>

Used components ​