Dropdown menu dynamically "generated" from Umbraco backend possible? - razor

Question

I am trying to populate my header with links. I have two dropdowns at the moment. I would like to populate the links using Umbraco and Razor, so nothing is hardcoded. This can be done quite easily (see code below), but populating the dropdowns is the tricky part.
I'm not sure how I would populate the dropdown in a good way. They are not subpages or anything like that, but they are simply dropdowns to make the header less wide. Here's how I populate my header using Razor by grabbing the links in Umbraco:
var home = CurrentPage.Site();
#foreach (var item in home.Children.Where("Visible"))
{
<li class="#(item.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
#Umbraco.GetDictionaryValue(item.Name)
</li>
}
home.Children.Where("Visible") is simply grabbing all the child pages, where I have not checked the umbracoNaviHide.
This is currently how my header is created NOT using Umbraco (which I need to populate using the pages from Umbraco):
<nav class="navbar navbar-toggleable-lg navbar-light fixed-top">
<div class="d-flex align-items-center justify-content-between">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand ml-3" href="/en">
<img src="logo.png" class="logo" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto justify-content-between full-width">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">History</a>
</div>
</li>
<li>
Our Products
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
<a class="dropdown-item" href="#">Tips</a>
<a class="dropdown-item" href="#">News</a>
</div>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</nav>
This will produce a result like this: https://codepen.io/anon/pen/QvyeRm
I don't want any of the links to be affected by this, as the links or pages doesn't really have anything to do with the header's layout. Here are some example URLs:
/en/about-us/
/en/history/
/en/our-products/
/en/tips/
I hope that makes sense.
Is there a good and easy way to do this?

Answer 1

There are a few ways that you could do this. the way I typically do main navigation on a site is to have a multiple content picker or similar to alow me to choose the items I want to show up in the navigation.
In your example, your sub-menu items aren't actually underneath the parent menu item. You could create a picker for each of the dropdowns, say on your home node, and choose the pages for each one?
If you plan to make the navigation more flexible though, you might need to do something a bit fancier, you could look at something like the Nested Content package to help you do this?

Answer 2

So I found a pretty good way of doing this. All I need to create is a content with document type set to Dropdown, then set the title (basically the label) and then add permissions for the children of the dropdown.
#foreach (var item in selection)
{
if (item.GetPropertyValue<bool>("showDropdown"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#item.GetVortoValue("Title")
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
#foreach (var child in item.Children)
{
<a class="dropdown-item" href="#child.Url">#child.GetVortoValue("Title")</a>
}
</div>
</li>
}
else
{
<li>
#item.GetVortoValue("Title")
</li>
}
}
I started by creating a document type called "Dropdown". The sole purpose of this document type, is to be a parent for the pages inside the dropdown. Then I set the permissions to allow the two pages I have to be inside the dropdown, and I set the permissions on my Master to allow the dropdown document type.
Then I created a new property on the master document type, which is called "Show dropdown". If this is ticked, it will show the dropdown on the page. I had to do this, because pages with children (if(item.Children.Any())) would be true no matter what.