Manage Bootstrap Dropdowns OPTIONS

I searching for a way of easy managing the BootStrap Dropdown OPTIONS from Admin or Frontmatter


  • Divider
  • Header
  • Disable


I’d like to find a way of using this in Frontmatter or Admin, so users can control this behaviour.
I’ve tried with page variables but not succesfull.

Anyone suggestions ?

I’m not a developer, so don’t make it too difficult for me…

I don’t think the bootstrap theme has these options if that is what you mean. These would have to be added to the partials/navigation.html.twig logic in the bootstrap theme.

That’s the place where i was trying to implement this, when i put in the

  • it does the work.
    But i’m trying to control this from within the admin or frontmatter to let the user control this.

    I’ve tried in Frontmatter


    and in mij navigation.html.twig

       {% if page.menuoptie.divider %}<li class="divider"></li>{% endif %}

    But that doesn’t do the job…

    Should this be possible with something like this anyway ?

  • If you add an option to the page frontmatter, you retrieve it using page.header.* not just page.*. So page.header.menuoptie.divider should get the value.

    I’ve tried ‘everything’… but still no luck…

    I’m able to check on the {{ page.header.menuoptie.divider }} if added to the page frontmatter


    I think the page header will only be ‘filled’ when the page is active/visible
    I need this variable when processing the menu for the site to create the Bootstrap divider in the navbar.

    Anyone with an option / suggestion to try ?

    Well yes, page refers to the current page.

    You can use page.find('/page-route') to get any page you want.

    Thanks for your reply, but i’m not searching for pages…

    All i want to do is just ‘parse’ the menu.html.twig and use the {{ page.header.menuoptie.divider }} to place the bootstrap devider for the dropdown menu.

    to create something like this:

    If the CSS frontmatter contains
    divider: true

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        {% if page.header.menuoptie.divider %}<li class=“divider”></li>{% endif %}
        <li><a href="#">JavaScript</a></li>
    <li class="divider"></li>

    I’ll hope i’ve explained my ‘problem’ clear enough now …?!
    Thanks for your patience…