When modeling the navigation, decide whether to bind content to the navigation or keep them separate.
This way, items that you link in the subpages or linked items element also hold the content. While this approach is more straightforward for understanding the concept, it isn’t suitable for omnichannel delivery.
That’s why it’s more suitable for smaller projects or projects that use one way of navigation for all channels.
If you separate navigation from content, you’re creating two items for content linked from your navigation. The first is for the content itself; the second is for a navigation item that links the first one.
This way is better for larger projects prepared for omnichannel content.
Create a new content type and add elements needed for your channel. In the code examples below, this type is called the Navigation item. It typically contains:
A text element for the title of the navigation item (Title in the code sample)
A subpages or linked items element for child menu items (Subpages)
A linked items element for the content itself (Content)
A URL slug element if you’re building website navigation (URL)
You need to define where your navigation begins. While websites typically have a homepage, other structures may have a root or main screen. You can use the content type created for navigation for the root navigation item or create a different content type for this purpose.
Websites usually benefit from having a separate content type for their homepage. That’s because homepages have a unique appearance and contain a different layout and content than other pages.
The code example below uses the navigation item for the homepage, created with the name Root navigation item.
Create content items using the created navigation content type and link them with the subpages or linked item element.
When finished, publish the root together with all its linked items.
Developers now need to request the items via the Delivery API to generate your menu.
Specify the depth parameter to retrieve more than one level of subpages or linked items if you want to show all navigation with one API call.
Using the retrieved data, display the navigation as you prefer. It can be your sections in a mobile app or smartwatch, or it can be a menu on a website like this:
The content of the linked items is inside the modular_content property of the response.
And that’s it! You now have a dynamic menu that your content creators can manage entirely from Kontent.ai.
Setting up breadcrumbs gives users a clear navigational path and quick access to related pages. If you have thought out and modeled your navigation, you can use the linked items element you already have in your Navigation item content type. You can include different subpages linked to the items you wish to display as breadcrumbs.When your website fetches content, it retrieves these linked items and displays their content and links. You can use the hierarchy you created to display the navigation. The navigation items are used as parents that currently display the content, like the diagram below:
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!
An Articles navigation item with two articles and a child navigation item.
An Articles navigation item with two articles and a child navigation item.
C#
// Tip: Find more about .NET SDKs at https://kontent.ai/learn/netusing Kontent.Ai.Delivery;// Tip: Use DI for this in your apps https://kontent.ai/learn/net-register-clientIDeliveryClient client = DeliveryClientBuilder .WithEnvironmentId("8d20758c-d74c-4f59-ae04-ee928c0816b7") .Build();// Gets navigation items and their linked items// Tip: Create strongly typed models according to https://kontent.ai/learn/net-strong-typesIDeliveryItemResponse<NavigationItem> rootResponse = await client.GetItemAsync<NavigationItem>("root_navigation_item", new DepthParameter(5) );NavigationItem root = rootResponse.Item;// Gets specific elements of all articlesIDeliveryItemListingResponse<Article> articleResponse = await client.GetItemsAsync<Article>( new EqualsFilter("system.type", "article"), new ElementsParameter("title", "url") );var articles = articleResponse.Items;
Choose your navigation approach | Kontent.ai Learn
Tip: See how separated navigation works in practice in the multi-site sample project that is prepared to handle omnichannel content.
Microsites and proofs of conceptIf you’re building a microsite or just a quick proof of concept and need navigation fast, you can hardcode the navigation. No part of your navigation is modeled in Kontent.ai; it’s all in the code. See our sample application as an example. We discourage using hardcoded navigation for larger live projects.
Tomas Nosek
8 minutes
. All rights reserved.