Activate the DropDown feature by utilizing the Three Dots span

When working with react-bootstrap, I encountered a challenge involving a button with a caret that opens a dropdown menu.

https://i.sstatic.net/7cfN3.png

However, my requirement is to replace the button and caret with vertical three dots styled differently.

I tried using a span with a CSS class for the three dots, but struggled to eliminate the button and caret.

This is what I currently have:

<Dropdown>
    <Dropdown.Toggle>
      <span className="threedots"></span>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

All I want to display are the three dots (with an added mouse-over effect). Is there a way to achieve this without using a button as a toggle?

cssreactjsreact-bootstrap

Answer №1

You have the ability to personalize Dropdowns by using custom subcomponents. Check out Custom Dropdown Components

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {/* include your custom icon here */}
    {children}

  </a>
));


then insert it as a custom toggle

<Dropdown >
    <Dropdown.Toggle as={CustomToggle}>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

View sample codesandbox, I hope this is helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Blurring isotopes within Google Chrome

While working with isotope in Google Chrome, I noticed that all items have the following CSS code: -webkit-transform: translate3d(properties); In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal ...

javascriptjquerycssgoogle-chromejquery-isotope

Checkbox validation malfunctioning

I'm currently working on a attendance management project and one of the forms includes multiple checkboxes. I want to ensure that at least one checkbox is checked before the form can be submitted. I attempted to use Javascript for this, however, the i ...

javascriptphpcsshtml

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

csshtmlasp.net-mvc-5

Issues with updating the state of Tic Tac Toe game in React

I have been delving into the world of React and attempting to create a tic-tac-toe game using functional components, based on the documentation. Here's what I have accomplished so far: app.js function App() { return ( <div className="A ...

reactjs

Converting React to Typescript and refactoring it leads to an issue where the property 'readOnly' is not recognized on the type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'

I'm currently in the process of refactoring an application using Typescript. Everything is going smoothly except for one particular component. I am utilizing the Input component from the library material-ui. import {Input} from "material-ui"; class ...

reactjstypescriptmaterial-ui

Vertical scroll bar positioned on the left side of a DIV

Can a vertical scroll bar be placed on the left side of a DIV using CSS? What about JavaScript? ...

javascripthtmlcss

The Chip Component in MUI dynamically alters its background color when it is selected

Currently, I am working on a project in React where I am utilizing the MUI's Chip component. My goal is to customize this component so that it changes its background color when selected, instead of sticking to the default generic color. https://i.sta ...

javascriptcssreactjsbootstrap-4material-ui

Are you looking to retrieve data from a server component in Next.js using the useSearchParams function for constructing URLs?

I'm currently facing a challenge in Next.js when attempting to fetch data, particularly with interactions between client and server components. import { useSearchParams } from 'next/navigation'; const searchParams = useSearchParams(); ...

reactjsnext.jsnext.js13

I'm working on a CSS project and my goal is to ensure that all the items are perfectly aligned in a

I have been working on a ReactJS code and I'm struggling to achieve the desired result. Specifically, I am using Material UI tabs and I want them to be aligned in line with an icon. The goal is to have the tabs and the ArrowBackIcon in perfect alignme ...

cssreactjsmaterial-ui

The properties are not appearing on the screen nor in the React Development Tools

Having difficulties grasping React props and mapping data from an array? Struggling to get the props to show up on your Card component, or display in React dev tools? It's unclear where the mistake lies. Seeking assistance to pinpoint the issue. Also ...

javascriptreactjsreact-props

How can I resolve the error "styles$6.makeStyles is not a function" while running unit tests using Jest?

Currently, I am working on a form component where I have integrated DateTimePicker and MuiPickersUtilsProvider to display two DateTime fields. While everything runs smoothly without any issues, when writing unit tests, I encountered a compilation error: ...

reactjsjestjsmaterial-ui

Experience real-time updates for CSS gradients

It may seem minor, but I am looking for a solution if possible. I have a webpage where I want to implement a CSS gradient as the background. The page has a fixed header at the top with content scrolling behind it, and I want the background gradient to cont ...

htmlcss

Hover activates a CSS animation where elements pop over other elements

I want to design a menu that resembles those "apps panels" we often see. My menu consists of 6 elements, arranged side-by-side with no space between them. When I hover over an element, it slightly pops as shown in the code snippet below: #account-bub ...

htmlcss

Creating a blank webpage after including a component tag for an Angular form

I encountered an issue while developing an Angular form. It seems that using the app-name-editor tag causes my entire HTML page to go blank, and the form does not display. However, removing the tag restores the webpage's functionality. This leads me t ...

javascripthtmlcssangular

What are some effective ways to align an image to the left and text to the right within a table

I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position. Here is what I hav ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

jqueryhtmlcsstwitter-bootstrap

React - Children components in an array not updating when props are modified within a callback function

The question may be a bit unclear, so let me provide further explanation. This is a personal project I am working on to improve my understanding of React basics and socket.io. Within this project, I have developed a CollapsibleList component and a NestedL ...

javascriptreactjssocket.io

Center an image of varying height within a container of fixed height

I have this HTML structure, and while I am open to making changes, I would prefer to keep it simple: <div class="c"> <img ...> </div> The image within the div will vary in size and I want it to be vertically centered. Currently, I ...

htmlcssvertical-alignment

Incorporating ScrollMagic and GSAP into Next.js: A Step-by-Step

A project built with Next.js includes the following component: import React, { PureComponent } from "react"; import { Power3, TimelineMax } from "gsap"; import ScrollMagic from "scrollmagic"; export default class TextFade extends PureComp ...

reactjsnext.jsscrollmagic

I'm having issues with getting Next.js i18n routing to function properly on dynamic routes

I am currently working on a Next app with only two routes: an index.tsx and a [slug].tsx. The slug route utilizes getStaticProps and getStaticPaths to retrieve the page content from a CMS. To enable internationalized routing, I have included the following ...

reactjsnext.js