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

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 | |
  • 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. – Nethi Swapna Jul 30 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_MSFT Jul 31 at 5:55

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.