Menu

The resources/js/Components/Menu directory contains Vue components related to the Sidebar Menu and Breadcrumb links of your application.

AppBreadcrumb

The AppBreadCrumb Vue Component is responsible for rendering the breadcrumb links of your application, improving the user experience by allowing them to easily navigate through the page levels of your application.

The AppBreadCrumb component is integrated into the AppSectionHeader component but can also be used independently as follows:

<div>
    <h2 class="text-2xl">Create User</h2>
    <AppBreadCrumb :items="breadCrumbItens"></AppBreadCrumb>
</div>

<script setup>
const breadCrumbItens = [
  { label: "Home", href: route("dashboard.index") },
  {
    label: "Users",
    href: route("user.index"),
  },
  { label: "Create User", last: true },
];
</script>

The rendered result will be:

Create User

Home > Users > Create User

AppBreadcrumb Props

Name	Type	Default	Description
items	Array	[]	The array of oject items to be rendered as breadcrumb links. Each item must have a label and href property. The last item must have a last property set to true.

AppBreadcrumbItem

The AppBreadCrumbItem Vue Component is responsible for rendering a single breadcrumb link or the current section name in your application. It is used internally by the AppBreadCrumb component and is not intended for direct use outside of it.

AppMenu

The AppMenu Vue Component is responsible for rendering the sidebar menu of your application. It is integrated into the resources/js/Components/Overlay/AppSideBar.vue component but can also be used independently as follows:

<AppMenu :items="items" />

<script setup>
import menu from "@/Configs/menu";

const items = menu.items;
</script>

The resources/js/Configs/menu.js file, as imported in the example above, contains the menu items for your application. The file is structured as follows:

//this import provides de route() function
import { ZiggyVue } from "/vendor/tightenco/ziggy/dist/vue.m";

export default {
  items: [
    {
      label: "Dashboard",
      permission: "Main Menu: Dashboard",
      icon: "ri-dashboard-line",
      link: route("dashboard.index"),
    },

    {
      label: "Access Control List",
      permission: "Main Menu: Access Control List",
      children: [
        {
          label: "Users",
          permission: "Main Menu: Access Control List: Users - List",
          icon: "ri-user-line",
          link: route("user.index"),
        },
        {
          label: "Permissions",
          permission: "Main Menu: Access Control List: Permissions - List",
          icon: "ri-shield-keyhole-line",
          link: route("aclPermission.index"),
        },
        {
          label: "Roles",
          permission: "Main Menu: Access Control List: Roles - List",
          icon: "ri-account-box-line",
          link: route("aclRole.index"),
        },
      ],
    },
  ],
};

The rendered result will be:

• Dashboard

• Access Control List
• Users
• Permissions
• Roles

AppMenu Props

Name	Type	Default	Description
items	Array	[]	The array of oject items to be rendered in the menu tree. Each item can have a label (required), permission, icon, link and children properties as the example above.

AppMenuSection

The AppMenuSection Vue Component is responsible for rendering a single menu section, which is composed of the section title and the section links. In the example above, the Access Control List is one such menu section.

This component is used internally by the AppMenu component and is not intended for direct use outside of it.

AppMenuItem

The AppMenuItem Vue Component is responsible for rendering a single menu section title (for items without a link attribute) or a single menu link.

This component is used internally by the AppMenuSection component and is not intended for direct use outside of it.