Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://our.umbraco.com/documentation/Tutorials/Creating-Basic-Site/Setting-The-Navigation-Menu below:

Setting-The-Navigation-Menu - Creating-Basic-Site - Tutorials - Documentation

You can fix the navigation menu in two ways:

1. Dynamically - Umbraco creates a navigation menu from the pages in the Content Tree, so when you create a page it automatically appears in the navigation menu. Using dynamic navigation, you do not need to manually add or change your menu items if the page changes.
2. Hardcode it - You can hardcode the navigation menu but they would require more upkeep in the future if you want to remove a page or change its name.

To create dynamic navigation links from published content nodes, follow these steps:

1. Go to Settings.

2. Select Templates from the Templating section, and open the Master template.

3. Go to the <!-- Navigation --> tag (around line 20) and use the following code:

   @inherits Umbraco.Web.Mvc.UmbracoViewPage
   @using Umbraco.Web;
   @{ 
       var site = Model.Root();
       var selection = site.Children.Where(x => x.IsVisible()); <!-- see below for explanation of IsVisible helper method -->
   }
   
   <!-- uncomment this line if you want the site name to appear in the top navigation -->
   <!-- <a class="nav-link @Html.Raw(Model.Id == site.Id ? "navi-link--active" : "")" href="@site.Url">@site.Name</a> -->
   
   @foreach (var item in selection)
   {
       <a class="nav-link @(item.IsAncestorOrSelf(Model) ? "nav-link--active" : null)" href="@item.Url">@item.Name</a>
   }
   

4. Click Save.

To add a basic hardcoded navigation, follow these steps:

1. Go to Settings.

2. Select Templates from the Templating section, and open the Master template.

3. Go to the <!-- Navigation --> tag (around line 20) and update your code to look like:

   <div class="container">
    	<nav class="navbar navbar-expand navbar-light">
    		<a class="navbar-brand font-weight-bold" href="/">Umbraco TV</a>
    			<!-- Links -->
    			<ul class="navbar-nav">
    				<li class="nav-item">
    				    <a class="nav-link" href="/contact-us">Contact Us</a>
    				</li>
    				<li class="nav-item">
    				    <a class="nav-link" href="/articles">Articles</a>
                   </li>
    			</ul>
    	</nav>
    </div>
   

4. Click Save.

If you add a checkbox property to a Document Type with an alias of umbracoNaviHide, the IsVisible() helper method can be used to exclude these from being shown in any collection.

Let's test the menu. You'll find that clicking on the Articles link throws an Umbraco error as we've not created this page yet. We'll create the Articles page in the next chapter.

Prev: Creating Master Template Part 2                   Next: Articles Parent and Article Items

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4