Bottom navigation

Metro 4 has at its contains classes for creating an bottom navigation element in material design style.

About

Designed for using with PhoneGap

To create bottom navigation element, you can create container with class .bottom-nav and add buttons inside a container. By default, a container positioned in bottom fixed position on page.

                    <div class="bottom-nav pos-absolute">
                        <button class="button">
                            <span class="icon mif-plus"></span>
                            <span class="label">Add</span>
                        </button>
                        <button class="button">
                            <span class="icon mif-favorite"></span>
                            <span class="label">Favorites</span>
                        </button>
                        <button class="button">
                            <span class="icon mif-search"></span>
                            <span class="label">Search</span>
                        </button>
                    </div>
                

Buttons

Each button in bottom navigation element must have: icon and label.

                    <button class="button">
                        <span class="icon mif-plus"></span>
                        <span class="label">Add</span>
                    </button>