PHPackages                             belugadigital/kirby-navigation - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. belugadigital/kirby-navigation

ActiveKirby-plugin[Utility & Helpers](/categories/utility)

belugadigital/kirby-navigation
==============================

Kirby 5 field for hierarchical menus with drag & drop level indentation.

5.0.8(8mo ago)8713.4k↓41%14[2 issues](https://github.com/chrisbeluga/kirby-navigation/issues)MITPHPPHP >=8.1.0 <8.5.0

Since Sep 22Pushed 8mo ago7 watchersCompare

[ Source](https://github.com/chrisbeluga/kirby-navigation)[ Packagist](https://packagist.org/packages/belugadigital/kirby-navigation)[ Docs](https://github.com/chrisbeluga/kirby-navigation)[ RSS](/packages/belugadigital-kirby-navigation/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (25)Used By (0)

Kirby Navigation Field
======================

[](#kirby-navigation-field)

A Navigation field for [Kirby CMS](https://getkirby.com).

Preview
-------

[](#preview)

[![](https://github.com/chrisbeluga/kirby-navigation/raw/main/navigation-demo-1.gif)](https://github.com/chrisbeluga/kirby-navigation/blob/main/navigation-demo-1.gif)

Installation & Usage
------------------------

[](#installation--usage)

Copy plugin files to your plugin's directory or install via composer with `composer require belugadigital/kirby-navigation`Note that this Composer package name (belugadigital/kirby-navigation) differs from the GitHub repository URL (chrisbeluga/kirby-navigation).

Kirby compatibility table
-------------------------

[](#kirby-compatibility-table)

Kirby versionCompatible plugin version^5.0^5.0^4.8^4.2^4.0^4.0^3.7^3.0^3.6^2.0^3.5^1.0Usage
-----

[](#usage)

Add the following blueprint to wherever you would like the navigation field to appear:

```
fields:
  navigation:
    label: Navigation
    type: navigation
    levels: 10
    help: Description of menu or where it is used
    width: 1/2
    multilang: false
```

Or use the following minimalist blueprint without extra options:

```
fields:
  navigation:
    label: Navigation
    type: navigation
```

The following example shows how you can output a menu from a template file, regardless of how many levels deep the menu is. This example assumes that the "site" blueprint contains a navigation field called "navigation":

```

```

If using the site as a headless CMS or would like to consume your menu in JS you can use the following field method to return a nested array of menu items:

```

```

Or when using Kirby Query language

```
{
  "query": "site",
  "select": {
    "title": "site.title",
    "navigation": "site.navigation.toNavigationArray"
  }
}
```

If you want full control over your menu and want to customize the markup, you can copy the navigation.php and navigation\_item.php files from the plugin's snippets directory to your /site/snippets directory, and customize them there. This is the recommended way of markup customization. For example, to add class="navigation-item navigation-item-X" to each link item, where X is the depth level of the given link, you can add the following line to your copy of navigation\_item.php:

```
$attributes['class']='navigation-item navigation-item-' . $depth;
```

If you prefer to use a foreach to create the menu, or if you are upgrading from an older version of this plugin, the foreach loop could look something like this:

```