0

I there a built-in way i can create navigation links as in picture below on modern sharepoint pages using Quick Links or any other apps?

enter image description here

Improve this question

2 Answers 2

Reset to default
0

To piggy-back off the answer provided by Michael Han_MSFT above, after you have selected the "Cascading" menu type, you will want to set up your links as sub-links to have the sub-layers of the menu.

enter image description here

Improve this answer
0

Just choose Cascading style for the navigation. This is in settings-> Change the look-> navigation:

enter image description here enter image description here

enter image description here

Update:

You could achieve this with the modern script web part:

https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor

The code demo use in the web part: https://www.w3schools.com/css/css_dropdowns.asp

<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

Test result:

enter image description here

Improve this answer
2
  • Hi, Thank you for taking time and answering my question. I am not looking this for the top navigation. The screenshot i shared is the one currently on my site top navigation bar. I am trying to see if it is possible to achieve this kind of cascading navigation on the main portion of the page using either quick links or any other apps.
    – G_S
    Commented Jul 30, 2020 at 14:29
  • Qucik links web part cannot achieve this. Moder script web part would be feasible to you. I have updated my answer.
    – Michael Han
    Commented Jul 31, 2020 at 5:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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