@@ -64,14 +64,14 @@ const CDropdown = defineComponent({
6464/**
6565 * Sets a specified direction and location of the dropdown menu.
6666 *
67- *@values 'dropup', 'dropend', 'dropstart'
67+ *@values 'center', ' dropup', 'dropup-center ', 'dropend', 'dropstart'
6868 */
6969direction :{
7070type :String ,
7171default :undefined ,
7272required :false ,
7373validator :( value :string ) => {
74- return [ 'dropup' , 'dropend' , 'dropstart' ] . includes ( value )
74+ return [ 'center' , ' dropup' , 'dropup-center ', 'dropend' , 'dropstart' ] . includes ( value )
7575} ,
7676} ,
7777/**
@@ -164,15 +164,26 @@ const CDropdown = defineComponent({
164164provide ( 'dropdownToggleRef' , dropdownToggleRef )
165165provide ( 'dropdownMenuRef' , dropdownMenuRef )
166166
167+ if ( props . direction === 'center' ) {
168+ placement . value = 'bottom'
169+ }
170+
167171if ( props . direction === 'dropup' ) {
168172placement . value = 'top-start'
169173}
174+
175+ if ( props . direction === 'dropup-center' ) {
176+ placement . value = 'top'
177+ }
178+
170179if ( props . direction === 'dropend' ) {
171180placement . value = 'right-start'
172181}
182+
173183if ( props . direction === 'dropstart' ) {
174184placement . value = 'left-start'
175185}
186+
176187if ( props . alignment === 'end' ) {
177188placement . value = 'bottom-end'
178189}
@@ -240,7 +251,11 @@ const CDropdown = defineComponent({
240251{
241252class :[
242253props . variant === 'nav-item' ?'nav-item dropdown' :props . variant ,
243- props . direction ,
254+ props . direction === 'center'
255+ ?'dropdown-center'
256+ :props . direction === 'dropup-center'
257+ ?'dropup dropup-center'
258+ :props . direction ,
244259] ,
245260} ,
246261slots . default && slots . default ( ) ,