Skip to main content

Navigations

Introduction​

In yeet, you can create navigation elements to move between pages of an application.
Each page represents an endpoint within the app context – it can be reached under a specific address (route).

info

You can think of an application as a street and each page as a house with its own address.
If you want to send a letter to someone, you need to know their exact address.

The same applies to pages in your application: the browser needs to know the page’s address (route) to display it.

Routing table​

For every page you create, a node is added to the routing table.
This node:

  • represents the page, and
  • stores the address (route) used to reach it.

You can edit a node at any time to change the route or other navigation-related properties.

Once created, a node can be shown in a navigation menu by assigning it to a mask (navigation layout).

Nodes​

Each node provides several properties:

Label
Display name shown in the navigation.

SourcePageId
Specifies which page should be loaded when the node is selected.

Navigationtype
Determines which navigation mask is used to render this node.
More details under Masks.

Is default page
Defines which page is shown directly after logging into the app.
Only one default page can be set.

Menu entry hidden
Hides the node from the navigation while still keeping the route accessible.

Full Path
If you want to define the entire URL path manually, you can use Full Path.
By default, the URL is generated from the navigation tree: each level in the structure becomes part of the path.
For simpler or custom URLs, you can override this behavior by setting a Full Path.

Route
The route segment that appears in the browser’s URL when the node is clicked.
If Full Path is not used, you typically only define the last part of the URL path here. The remaining path is derived automatically from the tree structure.

info

If you want to define aliases for a page, you can create additional nodes that point to the same SourcePageId, but use different URLs.

Alternatively, you can create empty nodes that act as parent entries to group subpages in the navigation.

Group
Some masks support grouping of navigation entries (nodes).

If certain entries should be grouped, set the same group value on those nodes.
The navigation component walks through the entries in order and inserts a separator when the group value changes from item n to item n+1.

Masks​

A mask is the visual representation of your routing table – it defines how the navigation is rendered.

Each mask provides a set of properties to control its appearance and behavior:

Label
Name of the mask.

Navigationtype
Base type of the navigation layout.
Changing this property later resets all properties in the Special category for that mask.

Item-Position
Depending on the base mask, navigation entries can be displayed in different locations:

  • Topbar
  • Left Sidebar
  • Right Sidebar

Bar-Element
Defines the element color of the navigation bar.
By default, the value is themed – it uses _primary_color_main from the project’s default Theme.
You can override this with a fixed color using the color picker. The reset button restores the themed color.

Bar-Background
Defines the background color of the navigation bar.
By default, this is themed as well and uses _background_color_basic from the project theme.
It behaves the same way as Bar-Element, including the option to override and reset.

Logout-Button
Adds a logout button to the navigation.

prefixContainer / centerContainer / suffixContainer
Each mask offers three slots, where you can place additional elements to extend the navigation.
Currently, the following elements are available:

  • navigation-label
  • navigation-logo
  • navigation-link

Some mask types also offer additional special properties that apply only to that specific menu type.

We currently provide the following mask types:

  • Button-Navigation
  • Burger-Menu

Button-Navigation​

In a Button-Navigation, only the first level of the navigation tree is shown.
Entries are displayed as a button group in the top bar.

It provides specific options such as:

Underline Elements
Displays the active navigation entry with an underline.

Burger-Menu​

In a Burger-Menu, the navigation is displayed inside a popup menu.
This makes it easy to navigate deep hierarchies and nested structures.

It offers several additional properties:

Banner
Enables or disables a banner area in the menu header.
The banner can include a headline and an optional background image.

Headline
If the banner is active, this value is shown as the title text in the top section of the popup.

Headline-Image
Image URL used in the header:

  • with banner enabled: acts as background image for the title,
  • without banner: displayed centered at the top (e.g. a company logo).

Menu-Element
Defines the element color of the menu entries.
By default, themed is selected and uses _primary_color_main from the project theme.
You can override it with a fixed color via the color picker; the reset button restores the themed value.

Menu-Background
Defines the background color of the menu.
By default, this is themed and uses _background_color_basic from the project theme.
It behaves similarly to Menu-Element and Bar-Background.