Dropdown menu with each TOC

[kousuke-nakano]

Dear Developers,

I wonder someone has succeeded in realizing this.

I have been trying to modifying dropdown lists (in navbar.html in _templates directory), but not succeeded yet.

in navbar.html

<div class="collapse navbar-collapse nav-collapse">
  <ul class="nav navbar-nav">
        {% if theme_navbar_links %}
        {%- for link in theme_navbar_links %}
        <!--<li><a href="{{ pathto(*link[1:]) }}">{{ link[0] }}</a></li>-->. <- commented (original)
        <li class="dropdown">
        <a role="button"
            data-toggle="dropdown"
            data-target="#"
        href="#">{{ link[0] }} <b class="caret"></b></a>
        <ul class="dropdown-menu">
            {{ tt2nav(toctree(collapse=False) )}} ??
        </ul>
        </li>
        {%- endfor %}
        {% endif %}

in conf.py

def setup(app):
    """Setup."""
    # Hook the events.
    print("app_connect")
    app.connect('html-page-context', hpc)

def tt2nav(toctree, klass=None, appendix=None, divider=False):
    """
    Injects ``has-dropdown`` and ``dropdown`` classes to HTML
    generated by the :func:`toctree` function.
    
    :param str toctree:
        HTML generated by the :func:`toctree` function.
    """
    
    tt = toctree
    divider = '<li class="divider"></li>' if divider else ''
    
    # Append anything just before the closing </ul>.
    if appendix:
        tt = re.sub(r'(</ul>$)', r'{}\1'.format(appendix), tt)
    
    # Add class attribute to all <ul> elements.
    tt = re.sub(r'<ul>', r'<ul class="">', tt)
    
    # Add class to first <ul> tag.
    if klass:
        tt = re.sub(r'(^<ul[\s\w-]+class=")', r'\1{} '.format(klass), tt)
    
    # Add class "active" to all <li> tags with "current" class.
#    tt = re.sub(r'(<li[\s\w-]+class="[^"]*current)([^"]*")', r'\1 active\2', tt)
    
    # Match each <li> that contains <ul>.
    pattern = r'(<li[\s\w-]+class=")([^>]*>[^<]*<a[^>]*>[^<]*</a>[^<]*<ul[\s\w]+class=")'
    
    # Inject the classes.
    replace = r'{}\1has-dropdown \2dropdown '.format(divider)
    
    # Do the replace and return.
    return re.sub(pattern, replace, tt)

def hpc(app, pagename, templatename, context, doctree):
    # Add the tt2nav() callable to Jinja2 template context.
    context['tt2nav'] = tt2nav

I would appreciate it if you could give me some advice.

Best regards.

Originally posted by @kousuke-nakano in #106 (comment)

[ryan-roemer]

Can you explain the UX that you're looking for here more? I'm not quite following what you're trying to do.

And as a helpful hint, Bootstrap 3+ removes support for multiple levels of dropdowns that used to be present in Bootstrap 2...