UPDATE: Support for Structured/Managed Navigation enabled on Modern Pages in Classic Team Sites

Microsoft

Hi everyone! Thank you for the feedback around wanting to move to the “modern” team site experiences, and needing support for structured/managed navigation. We’re pleased to announce that we have addressed this issue and will be rolling out the fix to the worldwide production environment in the coming days. Thank you for your patience – and to the community for helping us identify some issues during the initial First Release preview!

 

With this update if you have enabled publishing on a classic team site, your structured or managed navigation will now render correctly in the modern experience (both global and current navigation), including any scoped or audience-targeted links. We haven’t pulled all the classic settings into the modern panels yet, so when you need to edit the navigation elements, the edit link will direct you to the classic settings page.

 

Navigation settings on a classic team site:

 

areanavigationsettings.png

 

Now render correctly on a modern page:

 

managednav-global.png

 

Additionally, subsites will correctly inherit from the parent web when structural navigation is used.

 

Parent site:

 

structurednav-global.png

 

Subsite:

 

structurednav-subsiteinherit.png

 

We hope this unblocks you as you move to the modern user experience (UX). Try it out, and let us know if you have any questions. Thanks, Sean!

112 Replies

@Nate Clinton It occurs on any modern site. When the width drops below 640px the whole global navigation is removed from the DOM.

 

See attached.  I have removed site logo and name as it contained client specifics.global_nav.png

Ok... so you are referring to the view in Safari/etc. as well. In iOS, we should be displaying the nav natively. If you could check that, that'd be great. For Android we are doing that work soon. But that assumes I am referring to the right menu for you :) Might be better to chat on a call for this one? Thanks!

Hi @Sean Squires - Thanks for the reply. As you'll see in the description and pictures in my post on 4-Apr-2017, the site I'm working on is a Classic SharePoint site with publishing turn on for the site collection and the top level site, using Managed navigation for global and Structured navigation for the Quick Launch. It is not a Modern site, but I did create a Modern page and I set the view for the document libraries to show the Modern view to see how the navigation would appear on those pages. On other pages the navigation appears as it always has. When I'm on a modern page or a document library with a modern view, the navigation loses the flyouts (labeled level 3 in my screenshots) and does not follow the simple alternate CSS file I use simply to make each entry wider, put an outline around each entry, and add a highlight color when you mouse over an entry. The links (which omitted the "/sites/synctest/" part of each link in my earlier description) are now correct, so that's an improvement! But the existing dropdowns have no outline or mouse-over highlight color, so they're very hard to see, and the flyout level is missing. So my question is, is there work still going on that will address these issues, or is the current state the intended end state?

 

My goal is primarily to be able to turn on the modern views for document libraries and lists in existing Classic SharePoint sites, but I can't afford to lose the functionality of our current navigation. Thanks very much,

 

Richard

 

@Nate Clinton - This is actually from Chrome on a desktop.  This is not a device specific issue, its is specific to the screen resolution.  Any browser on any device which is trying to render the page on less than 640px will not see the Top Navigation (highlighted below)

 

global_nav_highlighted.png

 

Happy to have a call on this - please let me know how we would sort that out.

@Adrienne Kidd - apologies, I didn't see your inquiry last week. Yes, the new control does support flyout, but currently only two levels (parent and child) - which is parity for structured navigation, but not managed nav on global. I've opened a bug and we'll see if we can get this amended.

Hi @Scott Joyner - the goal is to ensure functionality w/ classic publishing provider (and that behavior)  - so for structured left and top that would be two-levels (parent-child), but for managed top it looks like it's not rendering the third level (grandchild). We're investigating the issue, so thanks to you and Adrienne for reporting. 

 

As for long labels, yes, we should be truncating and providing full preview in the tooltip. We'll take another look at this one (thought it was previously fixed!). 

Thanks for the additional detail @Richard Sharp (and sorry if I missed these previously). Yes, as we're effectively supporting the classic provider our goal is to have parity of behavior (which, incidentally, for structured is two-levels in global and current, but for managed, three-levels in global and two-levels for current) - so there appears to be a bug here (which others have since reported). We are investigating this now. 

 

I've also noted the issue of your alternate CSS not being honored. We'll investigate this and get back to you via this thread. 

 

Thanks for reporting - I want to fulfill your goal and get you on the modern views!

Hi @Sean Squires,

 

Thanks for your response and continued efforts to resolve these issues!

 

One note: We also have Publishing sites using Structured navigation in global, with the same concept we use in our sites with Managed navigation. In looking at those sites, we see that Structured navigation also supports three levels, just the same as Managed Navigation. All that's required is that you check the box to Show Subsites in the navigation in the Level 2 site. Then you see the flyouts just the same as you have in Managed navigation. The picture below is such a site (Classic, Publishing, Structured Global). It seems to be just the Publishing feature itself that enables the third level, which is what makes the feature so valuable! Thanks,

 

Richard

 

PublishingStructuredGlobalThreeLevels.png

This is a great start, thanks!

 

Could you next also please bring back the tree interface for managed metadata navigation and filtering as described here:

 

https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/19270162-bring-ba...

 

Hi Abhimanyu,

About getting back to the modern view, this flag of current view is stored in a cookie. Even if you clear the cookies and refrersh, you will get back the modern view :)

https://digidottie.com/2017/02/14/o365-sp-modern-to-classic-view/

@Sean Squires wrote:

Hi @Abhimanyu Singh - this link is provided on modern pages to provide a quick way to get back to classic view mode. It is setting a session cookie - so you can close your browser session to revert back to modern (note: the team might be looking at making this more of a toggle, right @Lincoln DeMaris?


Any update on this @Sean Squires and @Lincoln DeMaris ?


@Sean Squires wrote:

Thanks @Abhimanyu Singh - yes, the intended design pattern of modern nav where nesting is used is for the parent header to have an expand/collapse target and a link target. Currently, if the parent/header doesn't have a link it gets treated like a self-referencing link (in this case to the root site collection). Let me discuss w/ the team to see whether there are other options


@Sean Squires what has been the outcome of your discussion with your team on this? This is a no-go for us. We carefully crafted the navigation for all our sites, and now suddenly the headers start pointing to the root. This is awful. Please make the headers with no links, behave like headers and nothing else.

 

One way to solve this would be to NOT use those as self-referencing links at all. I mean do not use anchor element for such headers at all. Alternatively, use JavaScript to preventDefault on such headers. 

 

Please get this out already. It is ruining our experience.

We still are not seeing all our navigation rendered correctly when we move to the new UI.  We are using Managed Navigation.  We have the main level of sites listed, then subsites, then a third level of fly-out.  I was told this would still be supported in the new UI.  Please could someone confirm what the truth is???  We absolutely cannot move to the new UI without this.2017-05-18 10_47_40-Site Pages - All Pages - Internet Explorer.png

Thanks Richard - yes, Scott and Adrienne reported same - we should be honoring three levels in horizontal managed nav. We are actively investigating a fix and should have something out soon.

@Thaddeus Ferber - we are working on providing a modern metadata navigation experience for lists/libraries, as @Miceile Barrett noted. Are you asking for the tree-view control for site nav? We aren't planning to bring that experience forward at this time, but I'd like to make sure I understand the ask and scenario; can you confirm/elaborate? Thanks.

Thanks for reporting, Adrienne - as confirmed w/ Scott and Richard we should be supporting three levels (Parent > Child > Grandchild) in horizontal managed navigation. We are actively investigating a fix and should have something out soon.

Hi Sean,

 

Good request for clarification. Our (small) organization has all our files saved in a single document library. The primary way our staff navigates the document library is through tree-view control to filter the document library by nested metadata tags. (For us, this was the key to user adoption, allowing staff to use a UI that is similar to the one they were used to in their old file share with nested folders. Only instead with our SharePoint configuation they would be now using tags instead of folders.)

 

In re-reading this thread, our use case is indeed different from the primary one that this thread focuses on: we are not looking to have the top nav bar being used to navigate multiple sites (since we don't have multiple sites).

 

But it is still, I think, relevent to the topic of managed metadata navigation.

 

What we are looking for is a way to create dynamic metadata navigation, using the benefits of both Managed Metadata and Search. The result we want is a dynamic navigation that is built in through a taxonomy that shows the current search results filtered by the current node (with or without children, depending on the current configuration).

 

This can be done through using Content Search Web Part as described here: https://www.itunity.com/article/configure-managed-navigation-sharepoint-2013-step-step-94 (that link also captures perfectly the navigation behavor we are looking for).

 

However, we are an E1 subscriber which only gives us access to SharePoint Online 1 functionality, which does not include Content Search Web Part. There does not appear to be a way to do it through Content Query Web Part.

 

So we need to instead use this "A No-Code Way to Hack SharePoint's URLs to Filter by Managed Metadata and Show Child Terms" https://www.rightpoint.com/404?item=%2fblogs%2fviewpoint%2farchive%2f2015%2f01%2f08%2fa-no-code-way-... which is 1) clumbsy, and 2) need to be done by hand every time there is a new term we want to give users a link to.

 

Any ideas of how we might be able to achieve the desired navigation UI?

Hi @Richard Sharp - thanks for the clarification. No, goal for pub provider support in modern control is to provide parity on key functionality to unblock folks from moving to modern. The support for level 3 nodes is specific to horizontal managed navigation that we thought our previous fix addressed, so we're looking to address now (I'll keep thread apprised w/ that status). The support for alt CSS is one we're also investigating further, as we need to see how this aligns w/ the Fabric controls we are now using. I'm hoping that our Fabric improvements (design and interaction behavior) mitigate the need for alternate CSS, but acknowledge the feedback that we might need to provide affordances here. Thanks. 

Hi @Charlie Lee - thanks for clarifying. We still have some work to do w/ rendering horizontal nav in small viewports. We've logged the issue and will be working on a fix (for both team site w/ managed nav - as you appear to have here - and our new communication site template, as it has a default horizontal nav). Thanks for reporting.

Abhimanyu - thanks for bump - yes, the controls team is looking at options to make the behavior more flexible. As it is used in the nav we are looking to correct the arbitrary, self-referencing link that gets assigned to a node acting as a "header" (no link) and get a fix out. Thanks.