mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
54 lines
1.5 KiB
Markdown
54 lines
1.5 KiB
Markdown
---
|
|
title: Form
|
|
hide_title: true
|
|
---
|
|
|
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
|
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
|
|
|
|
# Navigation Menu
|
|
|
|
This is a nifty component that creates a navigation menu. Clicking an item will perform a navigation to the specified path and the correct item will be highlighted.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
## Basic usage
|
|
|
|
You specify the items of the menu by editing the **Items** array in the **Navigation Menu** component. Below is the default value.
|
|
|
|
```javascript
|
|
[
|
|
{
|
|
// Icons are references to material icons,
|
|
// see https://fonts.google.com/icons?selected=Material+Icons
|
|
Icon: 'home',
|
|
|
|
// The label to be shown on the nav item
|
|
Label: 'Home',
|
|
|
|
// The url to navigate to when clicked
|
|
Url: '/home',
|
|
|
|
// Setting this to true will indicate that this
|
|
// item should be selected if there is no path
|
|
// or if no other path matches
|
|
IsHome: true,
|
|
},
|
|
{
|
|
Icon: 'schedule',
|
|
Label: 'Calendar',
|
|
Url: '/calendar',
|
|
},
|
|
];
|
|
```
|
|
|
|
- **Icon** This is an icon identifier, you can find a list of all supported icons [here](https://fonts.google.com/icons?selected=Material+Icons).
|
|
|
|
- **Label** The label for the menu item.
|
|
- **Url** The path that should be navigated to when clicked.
|
|
- **IsHome** This specifies if this menu item is the "home" item. It will be shown as selected of there is no path or none of the others match the current path.
|