How can i apply html code to make a custom navigation menu with child and child inside child.

Im planning to apply below code :

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    <a class="navbar-brand" href="#">Tutorials</a>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="https://www.jquery-az.com/php-tutorials/" target="_blank">PHP</a></li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Web <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li>
                                <li><a href="https://www.jquery-az.com/html-tutorials/">HTML</a></li>
                                <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li>
                                <li class="divider"></li>
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bootstrap <b class="caret caret-right"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="https://www.jquery-az.com/bootstrap-carousel-5-single-multiple-horizontal-and-vertical-sliding-demos/">Carousel</a></li>
                                        <li><a href="https://www.jquery-az.com/bootstrap-tabs-with-default-and-customized-css-4-online-demos/">Bootstrap Tabs</a></li>
                                        <li><a href="https://www.jquery-az.com/bootstrap-alert-with-5-online-demos/">Alerts</a></li>
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Free Themes <b class="caret caret-right"></b></a>
                                            <ul class="dropdown-menu">
                                                        <li><a href="https://www.jquery-az.com/choco-bar-free-bootstrap-landing-page-theme/">Choco bar</a></li>
                                                        <li><a href="https://www.jquery-az.com/a-free-one-page-bootstrap-website-halwa/">HALWA</a></li>
                </div><!--/.nav-collapse -->



Hi Tams,

Let me make some of the translation between your html and OutSystems:

  • div - is a Container
  • ul and li - you can achieve that with a ListRecords with the property LineSeparator set to Bullets
  • To have lists inside lists, the inner list must be in a Web block
  • a - is a Link
  • The html classes, you can set them in the property Style Classes
  • Extra html attributes, you can set them in the Extended Properties of the elements

Let me know how far can you go with the above information.



hi Tams Katigbak,

Better you use the " Inline DropDown" widget  on the Menu.



Hi Tamsin,

Your path of development is not really low code, as Shyam already mentioned Outsystems has weblocks and scaffolding to easily create menus and submenu's. 

Is there a reason you cannot use those?