> ## Documentation Index
> Fetch the complete documentation index at: https://docs.micleo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation Menus

> In this page you will find how to add/update navigation menu items.

### Navigation Menu

To update the navigation menu items, update `src/navigation/menu.js` file. We just created different files for different sections so we can find items easily. You can follow the same or just write the all the items in index.js file.<br /><br />
Let's understand how to create each navigation menu item:

#### Section Title

You can create section title using simple object with single property `subheader`:

```json theme={null}
{
  subheader: 'Apps & Pages',
},
```

This will create header section title and will handle i18n. Value of header property will be used as key for i18n.

#### Navigation Menu Link

This will be the route link. For creating link follow below object structure:

```json theme={null}
{
  title: 'Email',
  to: 'apps-email',
  icon: 'mdi-email',
},
```

Let's understand what each property represents:

* `title` property will be title (rendered text) of this link. This will be key for i18n.
* `to` is vue-router's route name.
* `icon` property value should be material design icon.

You can also use route object as value of `to` property.

```json theme={null}
{
  title: 'John Doe',
  to: { name: 'apps-users-view', params: { id: 21 } },
  icon: 'mdi-account',
},
```

Besides internal route of app you can also create link for external sites:

```json theme={null}
{
  title: 'Documentation',
  href: 'https://docs.micleo.com',
  icon: 'mdi-file',
},
```

This will create external link which will open this link in new tab using `target="_blank"` and also it will add `rel="nofollow"`. Please note in above example we have used href property for external links and not to property.

<Note>You can also use `target` property in internal app route if you want to open your app's internal route in new tab, just like we did with authentication pages.</Note>

<Warning>
  #### Rendering as child of Menu Group

  If your navigation menu link is child of any navigation menu group then it will render circle as icon and if you provide any icon using icon property it will render as well but size of that icon will be smaller than normal icons.
  So, don't provide `icon` property if your navigation link is child of navigation menu group.
</Warning>

Besides this feature, you can also add badge to your link or group:

```json theme={null}
{
  title: 'Email',
  route: 'apps-email',
  icon: 'mdi-email-outline',
  badge: 'new',
  badgeColor: 'error',
},
```

You can use badge and badgeColor property to render tag for link.

* `badge`: property is used to render badge text
* `badgeColor`: This property is optional. Default variant for badge is primary.

There's also way to disable certain link if you don't want to allow navigation, just use `disable` property and set it to `true`.

```json theme={null}
{
  title: 'Disabled Menu',
  route: null,
  icon: 'mdi-close',
  disabled: true,
},
```

#### Navigation Menu Group

For navigation menu group you can use below object:

```json theme={null}
{
  title: 'Dashboards',
  icon: 'mdi-home',
  children: [
    // This is array of menu items or menu groups
    // NOTE: You can't use section titles (subheader) as children
  ],
},
```

Let's understand what each property represents:

* `title` property will be title of that group and it is key for i18n as well.
* `icon` property value should be material design icon.
* `children` property is group children. It can have menu items or menu groups as children.
  This also support `badge`, `badgeColor` and `disabled` properties same as menu link.

<Warning>
  #### Rendering as child of Menu Group

  If menu group is child of menu group then it's icon property is optional just like rendering of menu link inside menu group.
</Warning>

#### Header

Creating section title is little bit different than vertical navigation menu. You need to specify `icon` and `children` of header this time:

```json theme={null}
{
  header: 'Dashboards',
  icon: 'mdi-home',
  children: [
    // This is array of menu items or menu groups
    // NOTE: You can't use menu header as children
  ],
},
```

### Adding ACL

You will learn how to show/hide navigation based items for different users in Access Control page.