Buttons

[joelwolfgang]

Any thoughts on adding button functionality (button dropdowns etc.)?

[SideQuestDIY]

Hey @joelwolfgang, I actually use the walker for button dropdowns all the time.

Here is an example of how I use the walker for dropdowns on buttons. https://gist.github.com/twittem/6022669

Note: that gist is using the Bootstrap 2.3.2 walker class, I will look at creating a new example for Bootstrap 3.0 today.

As for more complex button patterns & bars I have been considering this for awhile, I will look at how to elegantly create this soon.

[joelwolfgang]

Great. I'm working on a project now in 3.0 and it would be great to have something like that.

[SideQuestDIY]

If you can provide specific examples of how you would will to use the script, I can point you in the right direction.

[joelwolfgang]

What I really want to do is create a split button drop down with text and icons for my logged in users. It will end up showing user options. Possibly, I want to create something to show user notifications as well, but that's probably a long way off for now.

[SideQuestDIY]

That's exactly what I was doing with the gist. Here is an example with Bootstrap 3.0

This is a navbar with the site title as the brand, a standard navbar menu, and then pulled to the right of the menu a button group. If the user is logged it displays a split account button with a dropdown that can be controlled from the WordPress admin. If the user is logged out it displays a button group with register & login buttons.

<nav class="navbar navbar-default" role="navigation">
    <div class="container">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
            <?php bloginfo('name'); ?>
        </a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <?php
            wp_nav_menu( array(
                'menu'       => 'primary',
                'theme_location' => 'primary',
                'depth'      => 2,
                'container'  => false,
                'menu_class' => 'nav navbar-nav',
                'fallback_cb' => 'wp_page_menu',
                'walker' => new wp_bootstrap_navwalker())
            );        
        ?>

        <?php if ( is_user_logged_in()) { 
            global $current_user;
            get_currentuserinfo();
            $user = $current_user->ID;
        ?>
            <div class="btn-group pull-right">
                <!-- Split button -->
                <div class="btn-group">
                    <button type="button" class="btn btn-danger">Account</button>
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <?php
                        wp_nav_menu( array(
                            'menu'       => 'account_menu',
                            'theme_location' => 'account_menu',
                            'depth'      => 1,
                            'container'  => false,
                            'menu_class' => 'dropdown-menu',
                            'walker' => new wp_bootstrap_navwalker())
                        );        
                    ?>
                </div>
            </div>
        <?php } else { ?>
            <div class="btn-group pull-right">
                <button type="button" class="btn btn-default">Register</button>
                <button type="button" class="btn btn-default">Sign In</button>
            </div>
        <?php } //End If ?>
    </div>
</div>

[jtrojan]

Vertical alginment of the buttons: Set the class "navbar-btn" to align the buttons vertically in the nav, as documented in http://getbootstrap.com/components/#navbar-buttons

button type="button" class="btn btn-default navbar-btn"