Manage Bootstrap Dropdowns OPTIONS

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....

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 <li class="divider"></li> 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 ?

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

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 ?

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
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...