cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
600toogood
Regular Visitor

Great Grandchild Pages

Is it possible to have great grandchild, great-great grandchild pages, etc.?

 

It appears that you can only have a parent, child and grandchild page because when I try to add a new child page to a grandchild page, the option disappears from the menu (on the ellipsis for the grandchild page, there is no longer an option for "Add a child page" or "Make this a subpage").

 

Please tell me the steps if it's possible to have these further down the line child pages.

 

I have attached a picture to show what my screen looks like.

1 ACCEPTED SOLUTION

Accepted Solutions
ragavanrajan
Super User
Super User

Hi @600toogood 

 The answer is no using portal studio. But you are not limited to. 

You can create your own header web template using liquid and Bootstrap 3. Then you can play around with list items to get grandchild pages. 

 

official link to create web templates: https://docs.microsoft.com/en-us/learn/modules/portal-custom-web/ 

 

And the sample code to get nested sub menus 

 

   <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Service A</a></li>
                <li><a href="#">Service B</a></li>
                <li class="dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service C1</a></li>
                        <li><a href="#">Service C2</a></li>
                        <li><a href="#">Service C3</a></li>
                        <li><a href="#">Service C4</a></li>
                        <li><a href="#">Service C5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

 

If you are happy to maintain your custom web template then please go ahead. 

 

Output: 

 

ragavanrajan_0-1637438927801.png

 


Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

View solution in original post

5 REPLIES 5
ragavanrajan
Super User
Super User

Hi @600toogood 

 The answer is no using portal studio. But you are not limited to. 

You can create your own header web template using liquid and Bootstrap 3. Then you can play around with list items to get grandchild pages. 

 

official link to create web templates: https://docs.microsoft.com/en-us/learn/modules/portal-custom-web/ 

 

And the sample code to get nested sub menus 

 

   <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Service A</a></li>
                <li><a href="#">Service B</a></li>
                <li class="dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service C1</a></li>
                        <li><a href="#">Service C2</a></li>
                        <li><a href="#">Service C3</a></li>
                        <li><a href="#">Service C4</a></li>
                        <li><a href="#">Service C5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

 

If you are happy to maintain your custom web template then please go ahead. 

 

Output: 

 

ragavanrajan_0-1637438927801.png

 


Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

chleverenz
Super User
Super User

@600toogood ,

as @ragavanrajan pointed out, technically its possible (may be not via the ui). I only want to add if i may, that i would really think about having this kind of navigation. I had discussions with colleagues about that and a third level of navigation might be ok, but do not take it too far. Your users will not be able to use that kind of deep navigation, especially mobile devices could be challenge for them.

But in fact i can not judge your project and your userbase. I am just very careful about this kind of reqeusts from clients 🙂

Have fun,

  Christian

That is a good point.  I did not plan on having the child pages as part of the default menu bar.  I just wanted to have more child pages because I like the "Full Page" template and how the child pages are set up on that template.  I agree that having all of the child pages appearing in the menu bar can be too busy and confusing.

Thank you for your help.  You've answered all three of my posts so far and provided sample coding, which has been a blessing to work off of.

No worries @600toogood . Happy to help.

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Top Solution Authors
Users online (1,837)