An interactive menu that opens to the bottom of a button using Nextjs and Tailwind CSS.
For this component to properly work, you will need to install popper.js into your project. Please run the following:
npm i -E @popperjs/[email protected]
Dropdown Example
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-900 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
white Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800 "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800 "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800 "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800 "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-blueGray-500 active:bg-blueGray-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
blueGray Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-blueGray-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
red Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-red-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-orange-500 active:bg-orange-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
orange Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-orange-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-amber-500 active:bg-amber-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
amber Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-amber-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-emerald-500 active:bg-emerald-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
emerald Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-emerald-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-teal-500 active:bg-teal-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
teal Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-teal-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-lightBlue-500 active:bg-lightBlue-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
lightBlue Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-lightBlue-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-indigo-500 active:bg-indigo-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
indigo Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-indigo-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-purple-500 active:bg-purple-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
purple Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-purple-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " bottom-start "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-pink-500 active:bg-pink-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
pink Dropdown
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-pink-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
Dropup Example
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-900 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
white Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800 "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800 "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800 "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800 "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-blueGray-500 active:bg-blueGray-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
blueGray Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-blueGray-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
red Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-red-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-orange-500 active:bg-orange-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
orange Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-orange-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-amber-500 active:bg-amber-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
amber Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-amber-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-emerald-500 active:bg-emerald-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
emerald Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-emerald-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-teal-500 active:bg-teal-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
teal Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-teal-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-lightBlue-500 active:bg-lightBlue-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
lightBlue Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-lightBlue-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-indigo-500 active:bg-indigo-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
indigo Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-indigo-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-purple-500 active:bg-purple-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
purple Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-purple-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
import React from " react " ;
import { createPopper } from ' @popperjs/core ' ;
const Dropdown = () => {
// dropdown props
const [ dropdownPopoverShow , setDropdownPopoverShow ] = React . useState ( false );
const btnDropdownRef = React . createRef ();
const popoverDropdownRef = React . createRef ();
const openDropdownPopover = () => {
createPopper ( btnDropdownRef . current , popoverDropdownRef . current , {
placement : " top "
});
setDropdownPopoverShow ( true );
};
const closeDropdownPopover = () => {
setDropdownPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full sm:w-6/12 md:w-4/12 px-4 " >
< div className = " relative inline-flex align-middle w-full " >
< button
className = " text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-pink-500 active:bg-pink-600 ease-linear transition-all duration-150 "
type = " button "
ref = { btnDropdownRef }
onClick = {() => {
dropdownPopoverShow
? closeDropdownPopover ()
: openDropdownPopover ();
}}
>
pink Dropup
< /button >
< div
ref = { popoverDropdownRef }
className = {
( dropdownPopoverShow ? " block " : " hidden " ) +
" bg-pink-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48 "
}
>
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Another action
< /a >
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Something else here
< /a >
< div className = " h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25 " />
< a
href = " #pablo "
className = " text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white "
onClick = { e => e . preventDefault ()}
>
Seprated link
< /a >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Dropdown ;
Props
Please check the official PopperJS Documentation
You can also check the Official PopperJS Github Repository