                                                <ul class="card menu-list aside-menu-list">
                        <li><a>Item #1</a></li>
                        <li>
                            <a class="is-active">Item #2</a>
                            <ul>
                                <li><a>Sous-item #1</a></li>
                                <li><a>Sous-item #2</a></li>
                                <li><a>Sous-item #3</a></li>
                            </ul>
                        </li>
                        <li><a>Item #3</a></li>
                        <li><a>Dernier élément du menu</a></li>
                    </ul>

Menu déroulant

Aperçu

Mode responsive

                                                <aside class="menu has-background-white is-pulled-left">
                        <div class="field">
                            <h2 class="has-text-weight-bold">Miguel</h2>
                        </div>
                
                        <div class="field">
                            <div class="control has-icons-right">
                                <input aria-label="search" class="input" type="search" placeholder="Rechercher">
                                <span class="icon is-right">
                                    <i class="tri-search" aria-hidden="true"></i>
                                </span>
                            </div>
                        </div>
                
                        <ul class="menu-list has-text-weight-bold">
                            <li><a class="with-arrow">Infos personnelles</a></li>
                            <li><a class="with-arrow">Factures et paiements</a></li>
                            <li>
                                <a class="with-arrow">Messagerie
                                    <span class="badge">3</span>
                                </a>
                            </li>
                            <li><a class="with-arrow">Commande</a></li>
                        </ul>
                
                        <ul class="menu-list has-text-weight-bold">
                            <li>
                                <a class="with-arrow">
                                    <span class="icon">
                                        <i class="tri-question-circle" aria-hidden="true"></i>
                                    </span>
                                    Aide & Contact
                                </a>
                            </li>
                            <li>
                                <a class="with-arrow">
                                    <span class="icon">
                                        <i class="tri-shopping-cart" aria-hidden="true"></i>
                                    </span>
                                    Boutique en ligne
                                </a>
                            </li>
                        </ul>
                
                        <ul class="menu-list has-text-weight-bold">
                            <li>
                                <a>
                                    <span class="icon">
                                        <i class="tri-power" aria-hidden="true"></i>
                                    </span>
                                    Déconnexion
                                </a>
                            </li>
                        </ul>
                    </aside>

Menu

Les menus permettent de centraliser et structurer une liste d'actions utilisateur ou de liens (pour la navigation par exemple).

Menu latéral

Menu déroulant