2017-08-31 15:49:19 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< title >
Menus · Bootstrap Material Design
< / title >
<!-- Twitter -->
2017-08-31 16:12:11 +03:00
< meta name = "twitter:site" content = "@FezVrasta" >
< meta name = "twitter:creator" content = "@FezVrasta" >
2017-08-31 15:49:19 +03:00
< meta name = "twitter:card" content = "summary" >
< meta name = "twitter:title" content = "Menus" >
< meta name = "twitter:description" content = "" >
2017-12-17 22:31:35 +03:00
< meta name = "twitter:image" content = "https://fezvrasta.github.io/assets/brand/bootstrap-social-logo.png" >
2017-08-31 15:49:19 +03:00
<!-- Facebook -->
2017-12-17 22:31:35 +03:00
< meta property = "og:url" content = "https://fezvrasta.github.io/docs/4.0/material-design/menus/" >
2017-08-31 15:49:19 +03:00
< meta property = "og:title" content = "Menus" >
< meta property = "og:description" content = "" >
< meta property = "og:type" content = "website" >
2017-12-17 22:31:35 +03:00
< meta property = "og:image" content = "http://fezvrasta.github.io/assets/brand/bootstrap-social.png" >
< meta property = "og:image:secure_url" content = "https://fezvrasta.github.io/assets/brand/bootstrap-social.png" >
2017-08-31 15:49:19 +03:00
< meta property = "og:image:type" content = "image/png" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
<!-- Meta -->
< meta name = "description" content = "The most popular HTML, CSS, and JS Material Design library in the world." >
2017-08-31 16:12:11 +03:00
< meta name = "author" content = "Federico Zivolo and Bootstrap contributors" >
2017-08-31 15:49:19 +03:00
<!-- Bootstrap core CSS -->
2017-08-31 15:57:09 +03:00
< link href = "/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel = "stylesheet" >
2017-08-31 15:49:19 +03:00
2017-09-05 15:07:16 +03:00
< link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel = "stylesheet" >
< link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" >
2017-08-31 15:49:19 +03:00
<!-- Documentation extras -->
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" / >
2017-08-31 15:57:09 +03:00
< link href = "/bootstrap-material-design/assets/css/docs.min.css" rel = "stylesheet" >
2017-08-31 15:49:19 +03:00
<!-- Favicons -->
2017-08-31 15:57:09 +03:00
< link rel = "apple-touch-icon" href = "/bootstrap-material-design/apple-touch-icon.png" >
< link rel = "icon" href = "/bootstrap-material-design/favicon.ico" >
2017-08-31 15:49:19 +03:00
< / head >
< body class = "bd-docs" data-spy = "scroll" data-target = ".bd-sidenav-active" >
< a id = "skippy" class = "sr-only sr-only-focusable" href = "#content" >
< div class = "container" >
< span class = "skiplink-text" > Skip to main content< / span >
< / div >
< / a >
< header class = "navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar" >
2017-08-31 15:57:09 +03:00
< a class = "navbar-brand mr-0 mr-md-2" href = "/bootstrap-material-design/" aria-label = "Bootstrap" >
2017-08-31 15:49:19 +03:00
< svg class = "d-block" width = "36" height = "36" viewbox = "0 0 612 612" xmlns = "http://www.w3.org/2000/svg" focusable = "false" > < title > Bootstrap< / title > < path fill = "currentColor" d = "M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z" / > < path fill = "currentColor" d = "M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z" / > < / svg >
< / a >
< div class = "navbar-nav-scroll" >
< ul class = "navbar-nav bd-navbar-nav flex-row" >
< li class = "nav-item" >
2017-08-31 15:57:09 +03:00
< a class = "nav-link " href = "/bootstrap-material-design/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');" > Home< / a >
2017-08-31 15:49:19 +03:00
< / li >
< li class = "nav-item" >
2017-12-10 19:35:44 +03:00
< a class = "nav-link active" href = "/bootstrap-material-design/docs/4.0/getting-started/introduction/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Docs');" > Documentation< / a >
2017-08-31 15:49:19 +03:00
< / li >
< li class = "nav-item" >
2017-08-31 15:57:09 +03:00
< a class = "nav-link " href = "/bootstrap-material-design/docs/4.0/examples/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Examples');" > Examples< / a >
2017-08-31 15:49:19 +03:00
< / li >
2020-10-05 16:34:06 +03:00
< li class = "nav-item " >
2020-10-05 16:31:38 +03:00
< a class = "nav-link" href = "https://mdbootstrap.com/pricing/jquery/pro/" > Material Bootstrap 4 PRO Kit< / a >
2017-08-31 15:49:19 +03:00
< / li >
2020-10-05 16:34:06 +03:00
< li class = "nav-item " >
2020-10-05 16:31:38 +03:00
< a class = "nav-link" href = "https://mdbootstrap.com/docs/standard/pro/" > Material Bootstrap 5 PRO Kit< / a >
2017-08-31 15:49:19 +03:00
< / li >
2020-10-05 16:40:56 +03:00
2017-08-31 15:49:19 +03:00
< / ul >
< / div >
< ul class = "navbar-nav flex-row ml-md-auto d-none d-md-flex" >
< li class = "nav-item dropdown" >
< a class = "nav-item nav-link dropdown-toggle mr-md-2" href = "#" id = "bd-versions" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
v4.0
< / a >
< div class = "dropdown-menu dropdown-menu-right" aria-labelledby = "bd-versions" >
2017-08-31 15:57:09 +03:00
< a class = "dropdown-item active" href = "/bootstrap-material-design/docs/4.0/" > Latest (4.x)< / a >
2017-09-05 14:47:21 +03:00
< a class = "dropdown-item" href = "https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html" > v3.x< / a >
2017-08-31 15:49:19 +03:00
< / div >
< / li >
< li class = "nav-item" >
2020-10-05 16:31:38 +03:00
< a class = "nav-link p-2" href = "https://github.com/mdbootstrap" target = "_blank" rel = "noopener" aria-label = "GitHub" >
2017-08-31 15:49:19 +03:00
< svg class = "navbar-nav-svg" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 512 499.36" focusable = "false" > < title > GitHub< / title > < path d = "M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill = "currentColor" fill-rule = "evenodd" / > < / svg >
< / a >
< / li >
< li class = "nav-item" >
2020-10-05 16:31:38 +03:00
< a class = "nav-link p-2" href = "https://twitter.com/MDBootstrap" target = "_blank" rel = "noopener" aria-label = "Twitter" >
2017-08-31 15:49:19 +03:00
< svg class = "navbar-nav-svg" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 512 416.32" focusable = "false" > < title > Twitter< / title > < path d = "M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill = "currentColor" / > < / svg >
< / a >
< / li >
< li class = "nav-item" >
2017-11-15 12:41:06 +03:00
< a class = "nav-link p-2" href = "https://spectrum.chat/bootstrap-md" target = "_blank" rel = "noopener" aria-label = "Spectrum" >
< svg class = "navbar-nav-svg" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 512 512" focusable = "false" > < title > Spectrum< / title >
< path fill = "currentColor" fill-rule = "evenodd" d = "M256,51.2C21.5,51.2,0,83.4,0,222.2c0,94.2,9.7,139.3,89.1,158.7l0,0v58.4c0.5,12.4,11,22.1,23.5,21.6c4-0.2,8-1.4,11.4-3.6l98.8-63.5H256c234.5,0,256-32.3,256-171.5S490.5,51.2,256,51.2z M144.9,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C177.9,251,163,265.5,144.9,265.2C144.9,265.2,144.9,265.2,144.9,265.2zM256,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C289,251,274.1,265.5,256,265.2C256,265.2,256,265.2,256,265.2z M367.1,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C400.1,251,385.2,265.5,367.1,265.2C367.1,265.2,367.1,265.2,367.1,265.2z" / >
2017-09-22 20:19:15 +03:00
< / svg >
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< / ul >
2020-10-05 16:31:38 +03:00
< a class = "btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href = "https://github.com/mdbootstrap/bootstrap-material-design/releases" > Download< / a >
2017-08-31 15:49:19 +03:00
< / header >
< div class = "container-fluid" >
< div class = "row flex-xl-nowrap" >
< div class = "col-12 col-md-3 col-xl-2 bd-sidebar" >
< form class = "bd-search d-flex align-items-center" >
< input type = "search" class = "form-control" id = "search-input" placeholder = "Search..." aria-label = "Search for..." autocomplete = "off" >
< button class = "btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type = "button" data-toggle = "collapse" data-target = "#bd-docs-nav" aria-controls = "bd-docs-nav" aria-expanded = "false" aria-label = "Toggle docs avigation" >
< svg class = "" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 30 30" width = "30" height = "30" focusable = "false" > < title > Menu< / title > < path stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-miterlimit = "10" d = "M4 7h22M4 15h22M4 23h22" / > < / svg >
< / button >
< / form >
< nav class = "collapse bd-links" id = "bd-docs-nav" >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/getting-started/introduction/" >
2017-08-31 15:49:19 +03:00
Getting started
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/introduction/" >
2017-08-31 15:49:19 +03:00
Introduction
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/download/" >
2017-08-31 15:49:19 +03:00
Download
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/contents/" >
2017-08-31 15:49:19 +03:00
Contents
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/browsers-devices/" >
2017-08-31 15:49:19 +03:00
Browsers & devices
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/javascript/" >
2017-08-31 15:49:19 +03:00
JavaScript
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/theming/" >
Theming
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/build-tools/" >
2017-08-31 15:49:19 +03:00
Build tools
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/webpack/" >
2017-08-31 15:49:19 +03:00
Webpack
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/getting-started/accessibility/" >
2017-08-31 15:49:19 +03:00
Accessibility
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/layout/overview/" >
2017-08-31 15:49:19 +03:00
Layout
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/layout/overview/" >
2017-08-31 15:49:19 +03:00
Overview
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/layout/grid/" >
2017-08-31 15:49:19 +03:00
Grid
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/layout/media-object/" >
2017-08-31 15:49:19 +03:00
Media object
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/layout/utilities-for-layout/" >
2017-08-31 15:49:19 +03:00
Utilities for layout
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/content/reboot/" >
2017-08-31 15:49:19 +03:00
Content
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/reboot/" >
2017-08-31 15:49:19 +03:00
Reboot
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/typography/" >
2017-08-31 15:49:19 +03:00
Typography
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/code/" >
2017-08-31 15:49:19 +03:00
Code
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/images/" >
2017-08-31 15:49:19 +03:00
Images
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/tables/" >
2017-08-31 15:49:19 +03:00
Tables
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/content/figures/" >
2017-08-31 15:49:19 +03:00
Figures
< / a >
< / li >
< / ul >
< / div >
2018-01-23 15:38:38 +03:00
< div class = "bd-toc-item active" >
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/material-design/buttons/" >
Material Design
2017-08-31 15:49:19 +03:00
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/buttons/" >
Buttons
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/collapse-inline/" >
Collapse inline
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/drawers/" >
Drawers
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/extensions/" >
Extensions
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/forms/" >
Forms
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/labels/" >
Labels
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/list-groups/" >
List groups
2017-08-31 15:49:19 +03:00
< / a >
< / li >
2018-01-23 15:38:38 +03:00
< li class = "active bd-sidenav-active" >
< a href = "/bootstrap-material-design/docs/4.0/material-design/menus/" >
Menus
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/navs/" >
Navs
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/selections/" >
Selections
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/material-design/snackbars/" >
Snackbars
2017-08-31 15:49:19 +03:00
< / a >
< / li >
2018-01-23 15:38:38 +03:00
< / ul >
< / div >
< div class = "bd-toc-item " >
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/" >
Bootstrap Components
< / a >
< ul class = "nav bd-sidenav" >
2017-08-31 15:49:19 +03:00
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/" >
Alerts
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/badge/" >
Badge
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/" >
Breadcrumb
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/" >
Buttons
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/" >
Button group
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/card/" >
Card
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/" >
Carousel
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/" >
Collapse
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/" >
Dropdowns
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/forms/" >
Forms
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/" >
Input group
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/" >
Jumbotron
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/" >
List group
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/modal/" >
Modal
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/navs/" >
Navs
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/" >
Navbar
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/" >
Pagination
2017-08-31 15:49:19 +03:00
< / a >
< / li >
2018-01-23 15:38:38 +03:00
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/" >
Popovers
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/progress/" >
Progress
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/" >
Scrollspy
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< li class = "" >
2018-01-23 15:38:38 +03:00
< a href = "/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/" >
Tooltips
2017-08-31 15:49:19 +03:00
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/utilities/borders/" >
2017-08-31 15:49:19 +03:00
Utilities
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/borders/" >
2017-08-31 15:49:19 +03:00
Borders
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/clearfix/" >
2017-08-31 15:49:19 +03:00
Clearfix
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/close-icon/" >
2017-08-31 15:49:19 +03:00
Close icon
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/colors/" >
2017-08-31 15:49:19 +03:00
Colors
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/display/" >
2017-08-31 15:49:19 +03:00
Display
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/embed/" >
2017-08-31 15:49:19 +03:00
Embed
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/flex/" >
2017-08-31 15:49:19 +03:00
Flex
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/float/" >
2017-08-31 15:49:19 +03:00
Float
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/image-replacement/" >
2017-08-31 15:49:19 +03:00
Image replacement
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/position/" >
2017-08-31 15:49:19 +03:00
Position
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/screenreaders/" >
2017-08-31 15:49:19 +03:00
Screenreaders
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/sizing/" >
2017-08-31 15:49:19 +03:00
Sizing
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/spacing/" >
2017-08-31 15:49:19 +03:00
Spacing
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/text/" >
2017-08-31 15:49:19 +03:00
Text
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/vertical-align/" >
2017-08-31 15:49:19 +03:00
Vertical align
< / a >
< / li >
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/utilities/visibility/" >
2017-08-31 15:49:19 +03:00
Visibility
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2018-01-23 15:38:38 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/extend/approach/" >
2017-08-31 15:49:19 +03:00
Extend
< / a >
< ul class = "nav bd-sidenav" >
2018-01-23 15:38:38 +03:00
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/extend/approach/" >
Approach
< / a >
< / li >
2017-08-31 15:49:19 +03:00
< li class = "" >
2017-08-31 15:57:09 +03:00
< a href = "/bootstrap-material-design/docs/4.0/extend/icons/" >
2017-08-31 15:49:19 +03:00
Icons
< / a >
< / li >
< / ul >
< / div >
< div class = "bd-toc-item " >
2017-08-31 15:57:09 +03:00
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/migration/" >
2017-08-31 15:49:19 +03:00
Migration
< / a >
< ul class = "nav bd-sidenav" >
< / ul >
< / div >
2018-01-23 15:38:38 +03:00
< div class = "bd-toc-item " >
< a class = "bd-toc-link" href = "/bootstrap-material-design/docs/4.0/about/overview/" >
About
< / a >
< ul class = "nav bd-sidenav" >
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/about/overview/" >
Overview
< / a >
< / li >
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/about/brand/" >
Brand
< / a >
< / li >
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/about/license/" >
License
< / a >
< / li >
< li class = "" >
< a href = "/bootstrap-material-design/docs/4.0/about/translations/" >
Translations
< / a >
< / li >
< / ul >
< / div >
2017-08-31 15:49:19 +03:00
< / nav >
< / div >
< main class = "col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role = "main" >
< h1 class = "bd-title" id = "content" > Menus< / h1 >
< p class = "bd-lead" > < / p >
2020-10-05 15:24:41 +03:00
< div class = "row" >
< div class = "alert alert-danger col-6 text-center" role = "alert" >
This UI Kit is dedicated to Bootstrap 4 & Material Design.
< hr >
< strong > Discover the latest Kit for Bootstrap 5 & Material Design 2.0!
< a type = "button" href = "https://mdbootstrap.com/docs/standard/" class = "btn btn-outline-danger mt-3" > GET
BOOTSTRAP
5 KIT FOR FREE< / a >
< / strong > < / div >
< / div >
2017-08-31 15:49:19 +03:00
2017-08-31 15:57:09 +03:00
< p > Bootstrap users know these as < a href = "/bootstrap-material-design/components/dropdowns/" > dropdowns< / a > , but these are also known as menus in the < a href = "https://www.google.com/design/spec/components/menus.html#menus-specs" > Material Design specification< / a > .< / p >
2017-08-31 15:49:19 +03:00
< h2 id = "contents" > Contents< / h2 >
< ul id = "markdown-toc" >
< li > < a href = "#contents" id = "markdown-toc-contents" > Contents< / a > < / li >
< li > < a href = "#styles" id = "markdown-toc-styles" > Styles< / a > < ul >
< li > < a href = "#icon-with-buttons" id = "markdown-toc-icon-with-buttons" > Icon with buttons< / a > < / li >
< li > < a href = "#icon-with-links" id = "markdown-toc-icon-with-links" > Icon with links< / a > < / li >
< li > < a href = "#small-fab" id = "markdown-toc-small-fab" > Small fab< / a > < / li >
< li > < a href = "#default-fab" id = "markdown-toc-default-fab" > Default fab< / a > < / li >
< li > < a href = "#default-button" id = "markdown-toc-default-button" > Default button< / a > < / li >
< / ul >
< / li >
< li > < a href = "#alignment" id = "markdown-toc-alignment" > Alignment< / a > < ul >
< li > < a href = "#lower-left-side" id = "markdown-toc-lower-left-side" > Lower left side< / a > < / li >
< li > < a href = "#lower-right-side" id = "markdown-toc-lower-right-side" > Lower right side< / a > < / li >
< / ul >
< / li >
< li > < a href = "#widths" id = "markdown-toc-widths" > Widths< / a > < ul >
< li > < a href = "#minimum-width" id = "markdown-toc-minimum-width" > Minimum width< / a > < / li >
< li > < a href = "#maximum-width" id = "markdown-toc-maximum-width" > Maximum width< / a > < / li >
< / ul >
< / li >
< / ul >
< h2 id = "styles" > Styles< / h2 >
< h3 id = "icon-with-buttons" > Icon with buttons< / h3 >
< div class = "bd-example" data-example-id = "" >
< div class = "dropdown" >
< button class = "btn bmd-btn-icon dropdown-toggle" type = "button" id = "ex1" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< i class = "material-icons" > more_vert< / i >
< / button >
< div class = "dropdown-menu dropdown-menu-left" aria-labelledby = "ex1" >
< button class = "dropdown-item" type = "button" > Action< / button >
< button class = "dropdown-item disabled" type = "button" > Another action< / button >
< button class = "dropdown-item" type = "button" > Another action< / button >
< / div >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn bmd-btn-icon dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "ex1"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > more_vert< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu dropdown-menu-left"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "ex1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item disabled"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "icon-with-links" > Icon with links< / h3 >
< div class = "bd-example" data-example-id = "" >
< div class = "btn-group" >
< button class = "btn bmd-btn-icon dropdown-toggle" type = "button" id = "ex2" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< i class = "material-icons" > more_vert< / i >
< / button >
< div class = "dropdown-menu dropdown-menu-left" aria-labelledby = "ex2" >
< a class = "dropdown-item" href = "#" > Regular link< / a >
< a class = "dropdown-item disabled" href = "#" > Disabled link< / a >
< a class = "dropdown-item" href = "#" > Another link< / a >
< / div >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "btn-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn bmd-btn-icon dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "ex2"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > more_vert< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu dropdown-menu-left"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "ex2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Regular link< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item disabled"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Disabled link< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Another link< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "small-fab" > Small fab< / h3 >
< div class = "bd-example" data-example-id = "" >
< div class = "btn-group" >
< button class = "btn bmd-btn-fab bmd-btn-fab-sm dropdown-toggle" type = "button" id = "ex3" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< i class = "material-icons" > more_vert< / i >
< / button >
< div class = "dropdown-menu dropdown-menu-left" aria-labelledby = "ex3" >
< button class = "dropdown-item" type = "button" > Action< / button >
< button class = "dropdown-item" type = "button" > Another action< / button >
< / div >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "btn-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn bmd-btn-fab bmd-btn-fab-sm dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "ex3"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > more_vert< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu dropdown-menu-left"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "ex3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "default-fab" > Default fab< / h3 >
< div class = "bd-example" data-example-id = "" >
< div class = "btn-group" >
< button class = "btn bmd-btn-fab dropdown-toggle" type = "button" id = "ex4" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< i class = "material-icons" > more_vert< / i >
< / button >
< div class = "dropdown-menu dropdown-menu-left" aria-labelledby = "ex4" >
< button class = "dropdown-item" type = "button" > Action< / button >
< button class = "dropdown-item" type = "button" > Another action< / button >
< / div >
< / div >
< / div >
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "btn-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn bmd-btn-fab dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "ex4"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > more_vert< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu dropdown-menu-left"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "ex4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "default-button" > Default button< / h3 >
< div class = "bd-example" data-example-id = "" >
2017-12-11 14:29:34 +03:00
< div class = "btn-group" >
2017-08-31 15:49:19 +03:00
< button class = "btn dropdown-toggle" type = "button" id = "buttonMenu1" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Dropdown
< / button >
< div class = "dropdown-menu" aria-labelledby = "buttonMenu1" >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< / div >
< / div >
< / div >
2017-12-11 14:29:34 +03:00
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "btn-group"< / span > < span class = "nt" > > < / span >
2017-08-31 15:49:19 +03:00
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "buttonMenu1"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
Dropdown
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "buttonMenu1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Something else here< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h2 id = "alignment" > Alignment< / h2 >
< h3 id = "lower-left-side" > Lower left side< / h3 >
< div class = "bd-example" data-example-id = "" >
2017-12-11 14:29:34 +03:00
< div class = "btn-group" >
2017-08-31 15:49:19 +03:00
< button class = "btn bmd-btn-icon dropdown-toggle" type = "button" id = "ll1" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< i class = "material-icons" > more_vert< / i >
< / button >
< div class = "dropdown-menu dropdown-menu-left" aria-labelledby = "ll1" >
< button class = "dropdown-item" type = "button" > Action< / button >
< button class = "dropdown-item" type = "button" > Another action< / button >
< button class = "dropdown-item disabled" type = "button" > Disabled action< / button >
< div class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "#" > Separated link< / a >
< / div >
< / div >
< / div >
2017-12-11 14:29:34 +03:00
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "btn-group"< / span > < span class = "nt" > > < / span >
2017-08-31 15:49:19 +03:00
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn bmd-btn-icon dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "ll1"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > more_vert< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu dropdown-menu-left"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "ll1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item disabled"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Disabled action< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-divider"< / span > < span class = "nt" > > < / span > < span class = "nt" > < /div> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Separated link< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "lower-right-side" > Lower right side< / h3 >
< div class = "bd-example" data-example-id = "" >
2017-12-11 14:29:34 +03:00
< div class = "dropdown pull-xs-right" >
2017-08-31 15:49:19 +03:00
< button class = "btn bmd-btn-icon dropdown-toggle" type = "button" id = "lr1" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< i class = "material-icons" > more_vert< / i >
< / button >
< div class = "dropdown-menu dropdown-menu-right" aria-labelledby = "lr1" >
< button class = "dropdown-item" type = "button" > Action< / button >
< button class = "dropdown-item" type = "button" > Another action< / button >
< button class = "dropdown-item disabled" type = "button" > Disabled action< / button >
< div class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "#" > Separated link< / a >
< / div >
< / div >
< / div >
2017-12-11 14:29:34 +03:00
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown pull-xs-right"< / span > < span class = "nt" > > < / span >
2017-08-31 15:49:19 +03:00
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn bmd-btn-icon dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "lr1"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > more_vert< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu dropdown-menu-right"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "lr1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item disabled"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Disabled action< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-divider"< / span > < span class = "nt" > > < / span > < span class = "nt" > < /div> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Separated link< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h2 id = "widths" > Widths< / h2 >
< h3 id = "minimum-width" > Minimum width< / h3 >
< div class = "bd-example" data-example-id = "" >
2017-12-11 14:29:34 +03:00
< div class = "btn-group pull-xs-right" >
2017-08-31 15:49:19 +03:00
< button class = "btn bmd-btn-icon dropdown-toggle" type = "button" id = "mw1" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< i class = "material-icons" > more_vert< / i >
< / button >
2017-12-11 14:29:34 +03:00
< div class = "dropdown-menu" aria-labelledby = "mw1" >
2017-08-31 15:49:19 +03:00
< button class = "dropdown-item" type = "button" > A< / button >
< button class = "dropdown-item" type = "button" > B< / button >
< / div >
< / div >
< / div >
2017-12-11 14:29:34 +03:00
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "btn-group pull-xs-right"< / span > < span class = "nt" > > < / span >
2017-08-31 15:49:19 +03:00
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn bmd-btn-icon dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "mw1"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > more_vert< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
2017-12-11 14:29:34 +03:00
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "mw1"< / span > < span class = "nt" > > < / span >
2017-08-31 15:49:19 +03:00
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > A< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > B< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< h3 id = "maximum-width" > Maximum width< / h3 >
< div class = "bd-example" data-example-id = "" >
2017-12-11 14:29:34 +03:00
< div class = "btn-group pull-xs-right" >
2017-08-31 15:49:19 +03:00
< button class = "btn bmd-btn-icon dropdown-toggle" type = "button" id = "mw2" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< i class = "material-icons" > more_vert< / i >
< / button >
2017-12-11 14:29:34 +03:00
< div class = "dropdown-menu" aria-labelledby = "mw2" >
2017-08-31 15:49:19 +03:00
< button class = "dropdown-item" type = "button" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.< / button >
< button class = "dropdown-item" type = "button" > Another action< / button >
< / div >
< / div >
< / div >
2017-12-11 14:29:34 +03:00
< div class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "btn-group pull-xs-right"< / span > < span class = "nt" > > < / span >
2017-08-31 15:49:19 +03:00
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn bmd-btn-icon dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "mw2"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "material-icons"< / span > < span class = "nt" > > < / span > more_vert< span class = "nt" > < /i> < / span >
< span class = "nt" > < /button> < / span >
2017-12-11 14:29:34 +03:00
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu"< / span > < span class = "na" > aria-labelledby=< / span > < span class = "s" > "mw2"< / span > < span class = "nt" > > < / span >
2017-08-31 15:49:19 +03:00
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / div >
< / main >
< / div >
< / div >
2017-09-25 17:31:14 +03:00
< script src = "/bootstrap-material-design/assets/js/vendor/split.min.js" >
< / script >
< script >
Split.setup({
2020-10-05 16:31:38 +03:00
mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
2017-09-25 17:47:18 +03:00
mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
2018-05-08 17:53:09 +03:00
mdbootstrap2: function () {document.body.classList.add('mdbootstrap')},
2017-09-25 17:31:14 +03:00
});
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-80431047-1', 'auto');
ga('send', 'pageview');
< / script >
< script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous" > < / script >
2017-08-31 15:57:09 +03:00
< script > window . jQuery || document . write ( '<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>' ) < / script >
2017-08-31 15:49:19 +03:00
2017-08-31 15:57:09 +03:00
< script src = "/bootstrap-material-design/assets/js/vendor/popper.min.js" > < / script >
2017-12-10 19:57:51 +03:00
< script src = "https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js" crossorigin = "anonymous" > < / script >
2017-08-31 15:49:19 +03:00
2017-08-31 15:57:09 +03:00
< script src = "/bootstrap-material-design/dist/js/bootstrap-material-design.js" > < / script >
2017-08-31 15:49:19 +03:00
2017-08-31 15:57:09 +03:00
< script src = "/bootstrap-material-design/assets/js/vendor/anchor.min.js" > < / script >
< script src = "/bootstrap-material-design/assets/js/vendor/clipboard.min.js" > < / script >
< script src = "/bootstrap-material-design/assets/js/vendor/holder.min.js" > < / script >
< script src = "/bootstrap-material-design/assets/js/src/application.js" > < / script >
2017-08-31 15:49:19 +03:00
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
2017-08-31 15:57:09 +03:00
< script src = "/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js" > < / script >
< script src = "/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js" > < / script >
2017-08-31 15:49:19 +03:00
< script type = "text/javascript" src = "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js" > < / script >
< script type = "text/javascript" >
var docsearch = docsearch({
2017-12-13 12:02:19 +03:00
apiKey: 'b5c13bef25101d81f781cc15f4485a52',
indexName: 'fezvrasta_bootstrap_material_design',
2017-08-31 15:49:19 +03:00
inputSelector: '#search-input',
handleSelected: function (input, event, suggestion) {
var url = suggestion.url;
url = suggestion.isLvl1 ? url.split('#')[0]: url;
// If it's a title we remove the anchor so it does not jump.
window.location.href = url;
},
transformData: function (hits) {
return hits.map(function (hit) {
2017-12-13 12:02:19 +03:00
console.log(hit.url);
hit.url = hit.url.replace('https://fezvrasta.github.io/', '/');
2017-08-31 15:49:19 +03:00
return hit;
});
},
debug: false // Set debug to true if you want to inspect the dropdown
});
< / script >
< script >
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
< / script >
< / body >
< / html >
