Dropdowns - Bootstrap

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript ... Skiptomaincontent Menu Gettingstarted Introduction Download Contents Browsers&devices JavaScript Theming Buildtools Webpack Accessibility Layout Overview Grid Utilitiesforlayout Content Reboot Typography Code Images Tables Figures Components Alerts Badge Breadcrumb Buttons Buttongroup Card Carousel Collapse Dropdowns Forms Inputgroup Jumbotron Listgroup Mediaobject Modal Navs Navbar Pagination Popovers Progress Scrollspy Spinners Toasts Tooltips Utilities Borders Clearfix Closeicon Colors Display Embed Flex Float Imagereplacement Overflow Position Screenreaders Shadows Sizing Spacing Stretchedlink Text Verticalalign Visibility Extend Approach Icons Migration About Overview Team Brand License Translations Overview Accessibility Examples Singlebutton Splitbutton Sizing Directions Dropup Dropright Dropleft Menuitems Active Disabled Menualignment Responsivealignment Menucontent Headers Dividers Text Forms Dropdownoptions Usage Viadataattributes ViaJavaScript Options Methods Events Dropdowns TogglecontextualoverlaysfordisplayinglistsoflinksandmorewiththeBootstrapdropdownplugin. Overview Dropdownsaretoggleable,contextualoverlaysfordisplayinglistsoflinksandmore.They’remadeinteractivewiththeincludedBootstrapdropdownJavaScriptplugin.They’retoggledbyclicking,notbyhovering;thisisanintentionaldesigndecision. Dropdownsarebuiltonathirdpartylibrary,Popper.js,whichprovidesdynamicpositioningandviewportdetection.Besuretoincludepopper.min.jsbeforeBootstrap’sJavaScriptorusebootstrap.bundle.min.js/bootstrap.bundle.jswhichcontainsPopper.js.Popper.jsisn’tusedtopositiondropdownsinnavbarsthoughasdynamicpositioningisn’trequired. Ifyou’rebuildingourJavaScriptfromsource,itrequiresutil.js. Accessibility TheWAIARIAstandarddefinesanactualrole="menu"widget,butthisisspecifictoapplication-likemenuswhichtriggeractionsorfunctions.ARIAmenuscanonlycontainmenuitems,checkboxmenuitems,radiobuttonmenuitems,radiobuttongroups,andsub-menus. Bootstrap’sdropdowns,ontheotherhand,aredesignedtobegenericandapplicabletoavarietyofsituationsandmarkupstructures.Forinstance,itispossibletocreatedropdownsthatcontainadditionalinputsandformcontrols,suchassearchfieldsorloginforms.Forthisreason,Bootstrapdoesnotexpect(norautomaticallyadd)anyoftheroleandaria-attributesrequiredfortrueARIAmenus.Authorswillhavetoincludethesemorespecificattributesthemselves. However,Bootstrapdoesaddbuilt-insupportformoststandardkeyboardmenuinteractions,suchastheabilitytomovethroughindividual.dropdown-itemelementsusingthecursorkeysandclosethemenuwiththeESCkey. Examples Wrapthedropdown’stoggle(yourbuttonorlink)andthedropdownmenuwithin.dropdown,oranotherelementthatdeclaresposition:relative;.Dropdownscanbetriggeredfromorelementstobetterfityourpotentialneeds. Singlebutton Anysingle.btncanbeturnedintoadropdowntogglewithsomemarkupchanges.Here’showyoucanputthemtoworkwitheitherelements: Dropdownbutton Action Anotheraction Somethingelsehere Dropdownbutton Action Anotheraction Somethingelsehere Andwithelements: Dropdownlink Action Anotheraction Somethingelsehere Dropdownlink Action Anotheraction Somethingelsehere Thebestpartisyoucandothiswithanybuttonvariant,too: Primary Action Anotheraction Somethingelsehere Separatedlink Secondary Action Anotheraction Somethingelsehere Separatedlink Success Action Anotheraction Somethingelsehere Separatedlink Info Action Anotheraction Somethingelsehere Separatedlink Warning Action Anotheraction Somethingelsehere Separatedlink Danger Action Anotheraction Somethingelsehere Separatedlink Action Action Anotheraction Somethingelsehere Separatedlink Splitbutton Similarly,createsplitbuttondropdownswithvirtuallythesamemarkupassinglebuttondropdowns,butwiththeadditionof.dropdown-toggle-splitforproperspacingaroundthedropdowncaret. Weusethisextraclasstoreducethehorizontalpaddingoneithersideofthecaretby25%andremovethemargin-leftthat’saddedforregularbuttondropdowns.Thoseextrachangeskeepthecaretcenteredinthesplitbuttonandprovideamoreappropriatelysizedhitareanexttothemainbutton. Primary ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Secondary ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Success ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Info ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Warning ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Danger ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Action ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Sizing Buttondropdownsworkwithbuttonsofallsizes,includingdefaultandsplitdropdownbuttons. Largebutton Action Anotheraction Somethingelsehere Separatedlink Largesplitbutton ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Smallbutton Action Anotheraction Somethingelsehere Separatedlink Smallsplitbutton ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Largebutton ... Largesplitbutton ToggleDropdown ... Smallbutton ... Smallsplitbutton ToggleDropdown ... Directions Dropup Triggerdropdownmenusaboveelementsbyadding.dropuptotheparentelement. Dropup Action Anotheraction Somethingelsehere Separatedlink Splitdropup ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Dropup Splitdropup ToggleDropdown Dropright Triggerdropdownmenusattherightoftheelementsbyadding.droprighttotheparentelement. Dropright Action Anotheraction Somethingelsehere Separatedlink Splitdropright ToggleDropright Action Anotheraction Somethingelsehere Separatedlink Dropright Splitdropright ToggleDropright Dropleft Triggerdropdownmenusattheleftoftheelementsbyadding.droplefttotheparentelement. Dropleft Action Anotheraction Somethingelsehere Separatedlink ToggleDropleft Action Anotheraction Somethingelsehere Separatedlink Splitdropleft Dropleft ToggleDropleft Splitdropleft Menuitems Historicallydropdownmenucontentshadtobelinks,butthat’snolongerthecasewithv4.Nowyoucanoptionallyuseelementsinyourdropdownsinsteadofjusts. Dropdown Action Anotheraction Somethingelsehere Dropdown Action Anotheraction Somethingelsehere Youcanalsocreatenon-interactivedropdownitemswith.dropdown-item-text.FeelfreetostylefurtherwithcustomCSSortextutilities. Dropdownitemtext Action Anotheraction Somethingelsehere Dropdownitemtext Action Anotheraction Somethingelsehere Active Add.activetoitemsinthedropdowntostylethemasactive. Regularlink Activelink Anotherlink Regularlink Activelink Anotherlink Disabled Add.disabledtoitemsinthedropdowntostylethemasdisabled. Regularlink Disabledlink Anotherlink Regularlink Disabledlink Anotherlink Menualignment Bydefault,adropdownmenuisautomaticallypositioned100%fromthetopandalongtheleftsideofitsparent.Add.dropdown-menu-righttoa.dropdown-menutorightalignthedropdownmenu. Headsup!DropdownsarepositionedthankstoPopper.js(exceptwhentheyarecontainedinanavbar). Right-alignedmenu Action Anotheraction Somethingelsehere Right-alignedmenu Action Anotheraction Somethingelsehere Responsivealignment Ifyouwanttouseresponsivealignment,disabledynamicpositioningbyaddingthedata-display="static"attributeandusetheresponsivevariationclasses. Toalignrightthedropdownmenuwiththegivenbreakpointorlarger,add.dropdown-menu{-sm|-md|-lg|-xl}-right. Left-alignedbutrightalignedwhenlargescreen Action Anotheraction Somethingelsehere Left-alignedbutrightalignedwhenlargescreen Action Anotheraction Somethingelsehere Toalignleftthedropdownmenuwiththegivenbreakpointorlarger,add.dropdown-menu-rightand.dropdown-menu{-sm|-md|-lg|-xl}-left. Right-alignedbutleftalignedwhenlargescreen Action Anotheraction Somethingelsehere Right-alignedbutleftalignedwhenlargescreen Action Anotheraction Somethingelsehere Notethatyoudon’tneedtoaddadata-display="static"attributetodropdownbuttonsinnavbars,sincePopper.jsisn’tusedinnavbars. Menucontent Headers Addaheadertolabelsectionsofactionsinanydropdownmenu. Dropdownheader Action Anotheraction Dropdownheader Action Anotheraction Dividers Separategroupsofrelatedmenuitemswithadivider. Action Anotheraction Somethingelsehere Separatedlink Action Anotheraction Somethingelsehere Separatedlink Text Placeanyfreeformtextwithinadropdownmenuwithtextandusespacingutilities.Notethatyou’lllikelyneedadditionalsizingstylestoconstrainthemenuwidth. Someexampletextthat'sfree-flowingwithinthedropdownmenu. Andthisismoreexampletext.

Someexampletextthat'sfree-flowingwithinthedropdownmenu.

Andthisismoreexampletext.

Forms Putaformwithinadropdownmenu,ormakeitintoadropdownmenu,andusemarginorpaddingutilitiestogiveitthenegativespaceyourequire. Emailaddress Password Rememberme Signin Newaroundhere?Signup Forgotpassword? Emailaddress Password Rememberme Signin Newaroundhere?Signup Forgotpassword? Emailaddress Password Rememberme Signin Emailaddress Password Rememberme Signin Dropdownoptions Usedata-offsetordata-referencetochangethelocationofthedropdown. Offset Action Anotheraction Somethingelsehere Reference ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Offset Action Anotheraction Somethingelsehere Reference ToggleDropdown Action Anotheraction Somethingelsehere Separatedlink Usage ViadataattributesorJavaScript,thedropdownplugintoggleshiddencontent(dropdownmenus)bytogglingthe.showclassontheparentlistitem.Thedata-toggle="dropdown"attributeisreliedonforclosingdropdownmenusatanapplicationlevel,soit’sagoodideatoalwaysuseit. Ontouch-enableddevices,openingadropdownaddsempty($.noop)mouseoverhandlerstotheimmediatechildrenoftheelement.ThisadmittedlyuglyhackisnecessarytoworkaroundaquirkiniOS’eventdelegation,whichwouldotherwisepreventatapanywhereoutsideofthedropdownfromtriggeringthecodethatclosesthedropdown.Oncethedropdownisclosed,theseadditionalemptymouseoverhandlersareremoved. Viadataattributes Adddata-toggle="dropdown"toalinkorbuttontotoggleadropdown. Dropdowntrigger ... ViaJavaScript CallthedropdownsviaJavaScript: $('.dropdown-toggle').dropdown() data-toggle="dropdown"stillrequired RegardlessofwhetheryoucallyourdropdownviaJavaScriptorinsteadusethedata-api,data-toggle="dropdown"isalwaysrequiredtobepresentonthedropdown’striggerelement. Options OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnametodata-,asindata-offset="". Name Type Default Description offset number|string|function 0 Offsetofthedropdownrelativetoitstarget. Whenafunctionisusedtodeterminetheoffset,itiscalledwithanobjectcontainingtheoffsetdataasitsfirstargument.Thefunctionmustreturnanobjectwiththesamestructure.ThetriggeringelementDOMnodeispassedasthesecondargument. FormoreinformationrefertoPopper.js'soffsetdocs. flip boolean true AllowDropdowntoflipincaseofanoverlappingonthereferenceelement.FormoreinformationrefertoPopper.js'sflipdocs. boundary string|element 'scrollParent' Overflowconstraintboundaryofthedropdownmenu.Acceptsthevaluesof'viewport','window','scrollParent',oranHTMLElementreference(JavaScriptonly).FormoreinformationrefertoPopper.js'spreventOverflowdocs. reference string|element 'toggle' Referenceelementofthedropdownmenu.Acceptsthevaluesof'toggle','parent',oranHTMLElementreference.FormoreinformationrefertoPopper.js'sreferenceObjectdocs. display string 'dynamic' Bydefault,weusePopper.jsfordynamicpositioning.Disablethiswithstatic. Notewhenboundaryissettoanyvalueotherthan'scrollParent',thestyleposition:staticisappliedtothe.dropdowncontainer. Methods Method Description $().dropdown('toggle') Togglesthedropdownmenuofagivennavbarortabbednavigation. $().dropdown('show') Showsthedropdownmenuofagivennavbarortabbednavigation. $().dropdown('hide') Hidesthedropdownmenuofagivennavbarortabbednavigation. $().dropdown('update') Updatesthepositionofanelement’sdropdown. $().dropdown('dispose') Destroysanelement’sdropdown. Events Alldropdowneventsarefiredatthe.dropdown-menu’sparentelementandhavearelatedTargetproperty,whosevalueisthetogglinganchorelement. hide.bs.dropdownandhidden.bs.dropdowneventshaveaclickEventproperty(onlywhentheoriginaleventtypeisclick)thatcontainsanEventObjectfortheclickevent. Event Description show.bs.dropdown Thiseventfiresimmediatelywhentheshowinstancemethodiscalled. shown.bs.dropdown Thiseventisfiredwhenthedropdownhasbeenmadevisibletotheuser(willwaitforCSStransitions,tocomplete). hide.bs.dropdown Thiseventisfiredimmediatelywhenthehideinstancemethodhasbeencalled. hidden.bs.dropdown Thiseventisfiredwhenthedropdownhasfinishedbeinghiddenfromtheuser(willwaitforCSStransitions,tocomplete). $('#myDropdown').on('show.bs.dropdown',function(){ //dosomething... })