Navigation

Navigation is sidebar list of links that helps users to navigate through the application.

We store the configuration in src/config/navigation.ts.

The configuration has the following structure:

export const navigation = {
    teams: [
        {
            name: '',
            logo: IconElement,
            plan: "Enterprise",
        },
        ...
    ],
    main: [
        {
            title: "Dashboard",
            url: "#",
            icon: IconElement,
        },
        ...
    ],
    general: [
        {
            title: "Customers",
            url: "#",
            icon: IconElement,
            items: [
                { title: "List customers", url: "#" },
                { title: "Create customer", url: "#" },
                { title: "Customer details", url: "#" },
            ],
        },
        ...
    ],
    ...
}

For details you can find the interfaces in src/types/navigation.ts

Navigation Category

• teams The teams configuration is used to display the switch list on the top of sidebar.

• main The main configuration is used to display the main navigation links. We use for pages of dashboard, smart-home, etc.

• general The general configuration is used to display the general navigation links. We use for pages of customer, product, jobs, etc.

How Add New Category

export const navigation = {
    ...,

    secondary: [
        {
            title: "New Page",
            url: "/new-page",
            icon: IconElement,
            items: [
                { title: "Item 1", url: "#" },
                { title: "Item 2", url: "#" },
                { title: "Item 3", url: "#" },
            ],
        },
    ],
}

Will be automatic generate on the sidebar with label secondary.

For configure manually you can find a component in src/components/app-sidebar.tsx