Manage Bootstrap Dropdowns OPTIONS

Archive
1

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

Like:

  • Divider
  • Header
  • Disable

(reference: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp)

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…

2

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.

3

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

    menuoptie:
    divider:‘true’

    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 ?

    • 4

    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.

    5

    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

    But…

    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 ?

    6

    Well yes, page refers to the current page.

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

    7

    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
    menuoptie:
    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>
  </ul>
</div> 
<li class="divider"></li>

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