ARIA menus, must only contain role="menuitem" , role="menuitemcheckbox" ... Historically dropdown menu contents had to be links, but that's no longer the ...
MenuGettingstartedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButtonGroupCardsCarouselCloseButtonDropdownsFiguresImagesListGroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutDropdownsTogglecontextualoverlaysfordisplayinglistsoflinksandmorewiththeBootstrapdropdownpluginOverview#Dropdownsaretoggleable,contextualoverlaysfordisplayinglistsof
linksandmore.Likeoverlays,Dropdownsarebuiltusingathird-party
libraryPopper.js,whichprovides
dynamicpositioningandviewportdetection.Accessibility#TheWAIARIAstandard
definesarole="menu"widget,butit'sveryspecifictoacertainkindofmenu.ARIAmenus,must
onlycontainrole="menuitem",role="menuitemcheckbox",orrole="menuitemradio".Ontheotherhand,Bootstrap'sdropdownsaredesignedtomoregeneric
andapplicationinavarietyofsituations.Forthisreasonwedon't
automaticallyaddthemenurolestothemarkup.Wedoimplementsome
basickeyboardnavigation,andifyoudoprovidethe"menu"role,
react-bootstrapwilldoitsbesttoensurethefocusmanagementis
compliantwiththeARIAauthoringguidelinesformenus.Examples#Singlebuttondropdowns#ThebasicDropdowniscomposedofawrappingDropdownand
inner,and.By
defaultthewillrendera
Buttoncomponentandacceptsallthesameprops.
DropdownButton
Action
Anotheraction
Somethingelse
DropdownButton
ActionAnotheractionSomethingelseCopySincetheaboveissuchacommonconfigurationreact-bootstrapprovides
thecomponenttohelpreducetyping.Provide
atitlepropandsomesandyou're
readytogo.
Action
Anotheraction
Somethingelse
ActionAnotheractionSomethingelseCopyDropdownButtonwillforwardButtonpropstotheunderlyingToggle
component<>
{['Primary','Secondary','Success','Info','Warning','Danger'].map(
(variant)=>(
Action
Anotheraction
ActiveItem
Separatedlink
),
)}
><>{['Primary','Secondary','Success','Info','Warning','Danger'].map((variant)=>(ActionAnotheractionActiveItemSeparatedlink),)}>CopySplitbuttondropdowns#Similarly,YoucreateasplitdropdownbycombiningtheDropdown
componentswithanotherButtonandaButtonGroup.
SplitButton
Action
Anotheraction
Somethingelse
SplitButton
ActionAnotheractionSomethingelseCopyAswithDropdownButton,SplitButtonisprovidedas
conveniencecomponent.<>
{['Primary','Secondary','Success','Info','Warning','Danger'].map(
(variant)=>(
Action
Anotheraction
ActiveItem
Separatedlink
),
)}
><>{['Primary','Secondary','Success','Info','Warning','Danger'].map((variant)=>(ActionAnotheractionActiveItemSeparatedlink),)}>CopySizing#Dropdownsworkwithbuttonsofallsizes.<>
{[DropdownButton,SplitButton].map((DropdownType,idx)=>(
Action
Anotheraction
Somethingelsehere
Separatedlink
))}
{[DropdownButton,SplitButton].map((DropdownType,idx)=>(
Action
Anotheraction
Somethingelsehere
Separatedlink
))}
><>{[DropdownButton,SplitButton].map((DropdownType,idx)=>(ActionAnotheractionSomethingelsehereSeparatedlink))}{[DropdownButton,SplitButton].map((DropdownType,idx)=>(ActionAnotheractionSomethingelsehereSeparatedlink))}
>CopyDarkdropdowns#Optintodarkerdropdownstomatchadarknavbarorcustomstylebyadding
variant="dark"ontoanexistingDropdownMenu.Alternatively,use
menuVariant="dark"whenusingtheDropdownButtoncomponent.<>
DropdownButton
Action
Anotheraction
Somethingelse
Separatedlink
Action
Anotheraction
Somethingelse
Separatedlink
><>DropdownButton
ActionAnotheractionSomethingelseSeparatedlink
ActionAnotheractionSomethingelseSeparatedlink>CopyUsingmenuVariant="dark"inaNavDropdown:
React-Bootstrap
React-BootstrapCopyDropdirections#Triggerdropdownmenusabove,below,left,ortotherightoftheir
toggleelements,withthedropprop.<>
{['up','down','start','end'].map((direction)=>(
Action
Anotheraction
Somethingelsehere
Separatedlink
))}
{['up','down','start','end'].map((direction)=>(
Action
Anotheraction
Somethingelsehere
Separatedlink
))}
><>{['up','down','start','end'].map((direction)=>(ActionAnotheractionSomethingelsehereSeparatedlink))}
{['up','down','start','end'].map((direction)=>(ActionAnotheractionSomethingelsehereSeparatedlink))}
>CopyDropdownitems#Historicallydropdownmenucontentshadtobelinks,butthat’sno
longerthecasewithv4.Nowyoucanoptionallyuse
Action
Anotheraction
ActiveItem
Separatedlink
><>Pow!Zoom!ActionAnotheractionActiveItemSeparatedlink{''}mixitupstyle-wiseActionAnotheractionActiveItemSeparatedlink>CopyCustomDropdownComponents#Forthosethatwanttocustomizeeverything,youcanforgotheincluded
ToggleandMenucomponents,andcreateyourown.Byprovidingcustom
componentstotheasprop,youcancontrolhoweach
componentbehaves.Customtoggleandmenucomponentsmustbeabletoacceptrefs.//TheforwardRefisimportant!!
//DropdownneedsaccesstotheDOMnodeinordertopositiontheMenu
constCustomToggle=React.forwardRef(({children,onClick},ref)=>(
{
e.preventDefault();
onClick(e);
}}
>
{children}
▼
));
//forwardRefagainhere!
//DropdownneedsaccesstotheDOMoftheMenutomeasureit
constCustomMenu=React.forwardRef(
({children,style,className,'aria-labelledby':labeledBy},ref)=>{
const[value,setValue]=useState('');
return(
setValue(e.target.value)}
value={value}
/>
{React.Children.toArray(children).filter(
(child)=>
!value||child.props.children.toLowerCase().startsWith(value),
)}
);
},
);
render(
Customtoggle
Red
Blue
Orange
Red-Orange
,
);//TheforwardRefisimportant!!//DropdownneedsaccesstotheDOMnodeinordertopositiontheMenuconstCustomToggle=React.forwardRef(({children,onClick},ref)=>({e.preventDefault();onClick(e);}}>{children}▼));
//forwardRefagainhere!//DropdownneedsaccesstotheDOMoftheMenutomeasureitconstCustomMenu=React.forwardRef(({children,style,className,'aria-labelledby':labeledBy},ref)=>{const[value,setValue]=useState('');
return(setValue(e.target.value)}value={value}/>{React.Children.toArray(children).filter((child)=>!value||child.props.children.toLowerCase().startsWith(value),)});},);
render(Customtoggle
RedBlueOrangeRed-Orange,);CopyAPI#DropdownButton#viewsourcefileimportDropdownButtonfrom'react-bootstrap/DropdownButton'CopyimportcodefortheDropdownButtoncomponentAconveniencecomponentforsimpleorgeneralusedropdowns.RendersaButtontoggleandallchildren
arepasseddirectlytothedefaultDropdown.Menu.Thiscomponentacceptsallof
Dropdown'sprops.
AllunknownpropsarepassedthroughtotheDropdowncomponent.Only
theButtonvariant,sizeandbsPrefixpropsarepassedtothetoggle,
alongwithmenu-relatedpropsarepassedtotheDropdown.MenuNameTypeDefaultDescriptionalign"start"|"end"|{sm:"start"|"end"}|{md:"start"|"end"}|{lg:"start"|"end"}|{xl:"start"|"end"}|{xxl:"start"|"end"}Alignsthedropdownmenu.
seeDropdownMenuformoredetailsdisabledbooleanDisablesbothButtonshrefstringAnhrefpassedtotheTogglecomponentidstringAnhtmlidattributefortheTogglebutton,necessaryforassistivetechnologies,suchasscreenreaders.menuRolestringAnARIAaccessibleroleappliedtotheMenucomponent.Whensetto'menu',ThedropdownmenuVariant'dark'Menucolorvariant.
Omittingthiswillusethedefaultlightcolor.onClickfunctionAnonClickhandlerpassedtotheTogglecomponentrenderMenuOnMountbooleanWhethertorenderthedropdownmenuintheDOMbeforethefirsttimeitisshownrootCloseEventstringWhicheventwhenfiredoutsidethecomponentwillcauseittobeclosed.
seeDropdownMenuformoredetailssizestringComponentsizevariations.titlerequirednodeThecontentofthenon-toggleButton.variantstringComponentvisualorcontextualstylevariants.bsPrefixstringChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.SplitButton#viewsourcefileimportSplitButtonfrom'react-bootstrap/SplitButton'CopyimportcodefortheSplitButtoncomponentAconveniencecomponentforsimpleorgeneralusesplitbuttondropdowns.Rendersa
ButtonGroupcontainingaButtonandaButtontogglefortheDropdown.Allchildren
arepasseddirectlytothedefaultDropdown.Menu.ThiscomponentacceptsallofDropdown's
props.
AllunknownpropsarepassedthroughtotheDropdowncomponent.
TheButtonvariant,sizeandbsPrefixpropsarepassedtothebuttonandtoggle,
andmenu-relatedpropsarepassedtotheDropdown.MenuNameTypeDefaultDescriptionalign"start"|"end"|{sm:"start"|"end"}|{md:"start"|"end"}|{lg:"start"|"end"}|{xl:"start"|"end"}|{xxl:"start"|"end"}Alignsthedropdownmenu.
seeDropdownMenuformoredetailsdisabledbooleanDisablesbothButtonshrefstringAnhrefpassedtothenon-toggleButtonidrequiredstringAnhtmlidattributefortheTogglebutton,necessaryforassistivetechnologies,suchasscreenreaders.menuRolestringAnARIAaccessibleroleappliedtotheMenucomponent.Whensetto'menu',ThedropdownonClickfunctionAnonClickhandlerpassedtothenon-toggleButtonrenderMenuOnMountbooleanWhethertorenderthedropdownmenuintheDOMbeforethefirsttimeitisshownrootCloseEventstringWhicheventwhenfiredoutsidethecomponentwillcauseittobeclosed.
seeDropdownMenuformoredetailssizestringComponentsizevariations.targetstringAnanchortargetpassedtothenon-toggleButtontitlerequirednodeThecontentofthenon-toggleButton.toggleLabelstring'Toggledropdown'Accessiblelabelforthetoggle;thevalueoftitleifnotspecified.typestring'button'Atypepassedtothenon-toggleButtonvariantstringComponentvisualorcontextualstylevariants.bsPrefixstringChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Dropdown#viewsourcefileimportDropdownfrom'react-bootstrap/Dropdown'CopyimportcodefortheDropdowncomponentNameTypeDefaultDescriptionalign"start"|"end"|{sm:"start"|"end"}|{md:"start"|"end"}|{lg:"start"|"end"}|{xl:"start"|"end"}|{xxl:"start"|"end"}'start'AlignsthedropdownmenutothespecifiedsideoftheDropdowntoggle.Youcan
alsoalignthemenuresponsivelyforbreakpointsstartingatsmandup.
Thealignmentdirectionwillaffectthespecifiedbreakpointorlarger.
Note:UsingresponsivealignmentwilldisablePopperusageforpositioning.aselementTypeYoucanuseacustomelementtypeforthiscomponent.autoClosetrue|'outside'|'inside'|falsetrueControlstheautoclosebehaviourofthedropdownwhenclickingoutsideof
thebuttonorthelist.drop'up'|'start'|'end'|'down'DeterminesthedirectionandlocationoftheMenuinrelationtoit'sToggle.flipbooleanAllowDropdowntoflipincaseofanoverlappingonthereferenceelement.Formoreinformationreferto
Popper.js'sflipdocs.focusFirstItemOnShowfalse|true|'keyboard'ControlsthefocusbehaviorforwhentheDropdownisopened.Setto
truetoalwaysfocusthefirstmenuitem,keyboardtofocusonlywhen
navigatingviathekeyboard,orfalsetodisablecompletely
TheDefaultbehaviorisfalseunlesstheMenuhasarole="menu"
whereitwilldefaulttokeyboardtomatchtherecommendedARIAAuthoringpractices.navbarbooleanfalseonSelectfunctionAcallbackfiredwhenamenuitemisselected.
(eventKey:any,event:Object)=>anyonTogglefunctioncontrolsshowAcallbackfiredwhentheDropdownwishestochangevisibility.Calledwiththerequested
showvalue,theDOMevent,andthesourcethatfiredit:'click','keydown','rootClose',or'select'.
function(
isOpen:boolean,
event:SyntheticEvent,
metadata:{
source:'select'|'click'|'rootClose'|'keydown'
}
):voidshowbooleancontrolledby:onToggle,initialprop:defaultShowWhetherornottheDropdownisvisible.bsPrefixstring'dropdown'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Dropdown.Toggle#viewsourcefileimportDropdownfrom'react-bootstrap/Dropdown'CopyimportcodefortheDropdowncomponentNameTypeDefaultDescriptionaselementType
'menuitem' is not defined