# [Usage](../../usage.md) > [UI](basics.md) > Navigation

---

![image](img/navigation_1.png)

You can configure the navigation in `config\k-framework\navigation.php`, following the structure:

```php
 ['button_text', 'icon', 'url', 'parent_group', 'parent_button', ordering_number]
```

- `button_text` -> The effective text of the button entry.
- `icon` (string) -> Material design icon suffix, example: 'home' -> will be transformed into 'mdi-home'.
- `url` (string) -> The link to which the button should redirect on click, can also be null.
- `parent_group` (string) -> Title of the group, if defined, these buttons will be grouped in the same group.
- `parent_button` (string) -> Text of the parent button, used to create submenus. Is advised to place the parent button 'url' on null.
- `ordering_number` (integer) -> Defines the order of the button, buttons will be organized in ascending order, if no parent group, the button will follow a general order, if parent group will be ordered between the other buttons of the group, if parent button will be ordered between the sub-buttons of the parent.

An example of the menu above:

```php
<?php

return [

    // Ungrouped Items (Standalone buttons without a group)
    ['Dashboard', 'home', '/', null, null, 1],
    ['Profile', 'account', '/profile', null, null, 2],

    // Ungrouped Parent with Submenu (No group, but has child items)
    ['Settings', 'cog', null, null, null, 3],
    ['General Settings', 'wrench', '/settings/general', null, 'Settings', 1],
    ['Account Settings', 'key', '/settings/account', null, 'Settings', 2],
    ['Privacy Settings', 'lock', '/settings/privacy', null, 'Settings', 3],

    // Grouped Items (Under a specific group title)
    ['Administration', 'shield', null, 'Management', null, 1],
    ['User Management', 'account-group', '/admin/users', 'Management', 'Administration', 1],
    ['Role Management', 'badge-account', '/admin/roles', 'Management', 'Administration', 2],

    // Another Group with Standalone and Submenu Items
    ['Reports', 'chart-bar', null, 'Analytics', null, 1],
    ['Sales Report', 'currency-usd', '/reports/sales', 'Analytics', 'Reports', 1],
    ['User Activity', 'chart-line', '/reports/activity', 'Analytics', 'Reports', 2],
    ['Summary', 'file-document-outline', '/reports/summary', 'Analytics', null, 2],

];

```

If using the:
```html
<x-kfw::ui>
    <!-- content here -->
</x-kfw::ui>
```
the navigation is already included.

Otherwise, you can add it to a page using:
```html
<x-kfw::navbar />
```

Remember to include a button or a icon to open/close the navbar, it is absolutely necessary in phone navigation:
```html
<i class="mdi mdi-menu i-large m-2 kfw-navbar-toggle" popup-message="{{ __('kfw::ui.menu_open_close') }}"></i>
```
This is an example, is only necessary that has the class `kfw-navbar-toggle`.

Config key / file: `config/k-framework/navigation.php` (array of `['button_text', 'icon', 'url', 'parent_group', 'parent_button', ordering_number]` entries, kept above). Minimal Blade/config example:

```php
// config/k-framework/navigation.php
return [
    ['Dashboard', 'home', '/', null, null, 1],
    ['Settings', 'cog', null, null, null, 2],
    ['General Settings', 'wrench', '/settings/general', null, 'Settings', 1],
];
```
```html
<x-kfw::ui>
     <!-- navbar with the entries above is already included -->
</x-kfw::ui>
<!-- or standalone: <x-kfw::navbar /> plus a .kfw-navbar-toggle button -->
```

### Headbar and navbar configuration

The shell layout is configured in `config/k-framework/ui.php`:

```php
'headbar' => [
    'enabled' => true,
],
'navbar' => [
    'enabled' => true,
    'compressed' => false,
    'orientation' => 'vertical',
    'default_open' => true,
],
```

- `headbar.enabled` enables the top headbar. When disabled, the headbar is not rendered: the logo moves to the top of the navbar, the headbar buttons are displayed in the navbar, the navbar toggle is placed in the content header next to the page title, and the page title is always displayed in the page.
- `navbar.enabled` enables the navigation bar and its toggle control.
- `navbar.compressed` reduces a vertical navbar to icons, expanding on hover.
- `navbar.orientation` accepts `vertical` or `horizontal`. With the headbar disabled, the horizontal navbar is rendered as a compact top bar hosting the logo, the menu and the headbar buttons.
- `navbar.default_open` sets the initial visibility on desktop. Mobile view always starts hidden and provides a close control inside the navbar.

See also: [basics](basics.md), [logo](logo.md), [theming](theming.md), [light/dark mode](dark_mode.md).