kirby-navigation
kirby-navigation copied to clipboard
Navigation field for getkirby.com
Kirby Navigation Field
A Navigation field for Kirby CMS Kirby CMS,
Preview
Installation & Usage
Copy plugin files to your plugin's directory or install via composer with composer require belugadigital/kirby-navigation
Kirby compatibility table
Kirby version | Compatible plugin version |
---|---|
^3.7 | ^3.0 |
^3.6 | ^2.0 |
^3.5 | ^1.0 |
Usage
Add the following blueprint to wherever you would like the navigation field to appear:
fields:
navigation:
label: Navigation
type: navigation
levels: 5
help: Description of menu or where it is used
width: 1/2
Two Field methods are included which will output the menu regardless of how many levels deep you go:
<?php echo $site->navigation()->toNavigationMarkup(); ?>
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 an array of menu items:
<?php $site->navigation()->toNavigationArray(); ?>
Or when using Kirby Query language
{
"query": "site",
"select": {
"title": "site.title",
"navigation": "site.navigation.toNavigationArray"
}
}
If you would like full control of your menu and would prefer to use a foreach to create the menu, that could look something like this:
<?php if($site->navigation()->isNotEmpty()): ?>
<ul>
<?php foreach($site->navigation()->toStructure() as $nav): ?>
<li>
<a href="<?php echo $nav->url(); ?>" <?php e($nav->isOpen(), 'aria-current') ?>>
<?php echo $nav->text() ?>
</a>
<?php if($nav->children()->isNotEmpty()): ?>
<ul>
<?php foreach($nav->children()->toStructure() as $child): ?>
<li>
<a href="<?php echo $child->url() ?>">
<?php echo $child->text() ?>
</a>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
Info
Nesting limit is set as default to 5, to allow further levels adjust the levels option in the blueprint
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.