Is there a way to build responsive navigation using build in navigation component in Sitecore SXA?

I tried to apply navigation-mobile class, but it doesn't adapt the mobile layout.

Thanks in advance.

  • could you explain what do you mean by responsive navigation? If you describe your expected behavior more precisely (images will be welcome) I will tell you if this is possible or not. – Alan Płócieniak Dec 4 '17 at 18:52
  • I am looking for description of navigation classes. Which classes should apply to navigation items so it can adapt mobile layout? Also hide under main navigation doesn't work for me as well. Thank you for your help in advance. Do you know any demo site or tutorial/videos etc? – Discovery Jan 2 '18 at 17:45
  • This is not an answer to my question. I still don't know what are your expectations. – Alan Płócieniak Jan 3 '18 at 16:29
  • Sorry. Let me rephrase the question. How do I get the Navigation component to work in SxA? Any Demo site or sample would be useful. Thank you – Discovery Jan 3 '18 at 16:59
  • 1
    Let me know if this article works for you. michaellwest.blogspot.com/2018/02/hamburger-menu-in-sxa.html – Michael West Feb 25 '18 at 18:44

A quick way is to use the Toggle component.

  1. Add a Toggle component where you want your "menu" toggle should be.
  2. Put a Navigation component with navigation-mobile class in the toggle's placeholder.
  3. Update the old navigation component's visibilty under the Grid's Advance tab to only show up on Desktops and Large Desktops.
  4. Update the Toggle's visibility to only show up for Phones and Tablets.

Of course this isn't optimized and may not even look close to what you need but it is a responsive mobile nav.

If you want another solution, you can take a look at my blog post.

  • Blog post link is empty. Please update the link. Thanks – Discovery Jan 26 '18 at 13:29
  • Ooops....updated. – Marco Jan 26 '18 at 16:35

For navigation component to work, you need to create that page under Home item, using Page data template. After that, add navigation component in your page and select the style as horizontal/vertical/sidebar.

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.