0

For a client I'm developing a public facing SharePoint site. I'm using Managed Metadata. Let's say I have the following term set:

 - Home
 - Products
    - Product A
    - Product B
    - Product C
 - Brands
    - Brand A
    - Brand B

The site has a horizontal global navigation, which will only show the first level of the navigation nodes ("Home", "Products" and "Brands"). When I click on Products a seperate vertical navigation should be displayed with only the subitems ("Product A", "Product B", "Product C"). How can this be achieved? I tried using the current navigation snippet in the Page Layout, but it will always start from the top level. When I hide the first level with CSS, "Brand A" and "Brand B" are still displayed as if they were subitems of Products. I tried setting StartFromCurrentNode and ShowStartingNode in all possible combinations, but to no avail. In the term set manager it's possible to disable "Products" to be displayed in the current navigation, but this will cause all subitems to be hidden in the current navigation.

So my question is: how can I create a vertical navigation which only shows the subnavigation items? Anyone suggestions how to achieve this with OOTB SharePoint functionality?

Edit: image to describe what I want to achieve example

1

Okay finally got this figured out. Consider the following example:

- Home
- Products
   - Product A
   - Product B
   - Product C
- Brands
    - Brand A
    - Brand B

When you use a OOTB Vertical Navigation snippet in your masterpage or page layout then it will always show items starting from the current level. So the trick is to link the "Products" menuitem (in the managed metadata) to the the first product page ("Product A" in above example) instead of a seperate products page.

To do this, do the following:

  1. Go to Site Settings;
  2. Click on Navigation;
  3. Select "Open Term Store Management Tool" and navigate to your sitecollection navigation;
  4. Select the "Products" page (the parent item which contains the child pages);
  5. Go to the tab "Navigation". Under "Navigation Node Type" select "Simple Link or Header". Enter the relative URL to the first child item (fe. "/en/products/product_a").

As far as I could see it was not possible to modify the OOTB Vertical Navigation snippet in a way that it will show only second level menu items. It will always show the navigation from the current level.

When you click on "Products" the Vertical Navigation will show the entire tree ("Home", "Products", "Products A", etc.). If you don't want this and you don't want the "Products" menu item to link to the "Product A" page but to it's own page, then there is another workaround. This workaround uses a Content Query Web Part. Do the following:

  1. Query for the product page;
  2. Modify the ContentQueryMain.xsl/ItemStyle.xsl to turn it into a menu;
  3. Export the web part and upload it into the list of Web Parts (Edit Page > Insert > Web Part > Upload);
  4. Go to the Snippet Manager and generate a snippet out of your custom CQWP;
  5. Paste that snippet in your master page/page layout ...

... And you're good to go.

-1

You can make the Left Navigation styles with your custom master page :

  • Thanks for taking the time to respond. The links describe how to make the navigation look pretty, but do not answer my question (how can I create a vertical navigation which only show the subnavigation items). – Arjan Feb 11 '15 at 12:56
  • It will make accordian menu which displays only ("Home", "Products" and "Brands"). Then when you click on Products a seperate vertical navigation will be displayed with the subitems. [As you said] – Ronak Patel Feb 11 '15 at 13:10
  • But I don't want a accordion menu. I need two menu's: a horizontal menu which shows the first level of menu's and a seperate vertical menu in case I'm on a page which has subnavigation. On that menu I only want the subitems of the parent item that is selected in the horizontal global navigation. – Arjan Feb 11 '15 at 13:21
  • I suggest you that If you have two separate navigation then shows only header navigation on both. When you clicked on one then other one will be displayed manually. If you want code then I can provide you for create nodes programmatically. – Ronak Patel Feb 11 '15 at 13:30
  • That's not possible, I have to recreate an existing site in SharePoint. Having two menu's with the same navigation items may also confuse the users. Especially for you I added an image with the situation I have to create :). – Arjan Feb 11 '15 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.