Clicking on the icon will reveal a drop-down menu in ReactJS

Question

Clicking on the icon will reveal a drop-down menu in ReactJS

Currently, I have a Navbar setup with a conditional statement that displays the user-icon if the userstatus is true (indicating the user is signed in), otherwise it shows the signin. My goal is to make it so that when I click on either the user-icon or signin, a drop-down menu appears. I plan on using this for a logout button later on. I'm having trouble figuring out how to achieve this functionality. While looking at the documentation on , I noticed that I can implement something similar but I want to use my own icon (glyphicon glyphicon-user) instead of the standard rectangle box.

https://i.sstatic.net/BsOtL.png

I want to achieve a design like the one shown below, but instead of using a Dropdown button, I want to incorporate the user-icon.

https://i.sstatic.net/ie0sh.png

If you have any suggestions or pointers, please share them with me.

-Code excerpt

<li>
  <a className="active" href="/signin">
    {userstatus ? (
      <a className=" signin-icon glyphicon glyphicon-user"></a>
    ) : (
      <a>SIGNIN</a>
    )}
  </a>
</li>

javascript css reactjs bootstrap-4 react-bootstrap

Answer 1

Answer №1

One option that I do not recommend is to override the Bootstrap CSS, as it can be a lot of work and hassle. This involves resetting all the CSS and using !important for a lot of styles.

Another alternative is to create your own dropdown menu, which I personally find to be much simpler than dealing with the previous solution's complications.

If you are using React hooks, for example:

const [isDropdownOpen, setDropdownOpen] = useState(false);
const [list, setList] = useState([1, 2, 3]);
const toggleDropDown = () => setDropdownOpen(!isDropdownOpen);
const DropdownList = useMemo(() => list.map(el => <div>el</div>));
return (
<>
<button class="signin-icon glyphicon glyphicon-user" onClick={toggleDropDown}>
{isDropdownOpen ? DropdownList : false}
</>
)

Answer 2

One option that I do not recommend is to override the Bootstrap CSS, as it can be a lot of work and hassle. This involves resetting all the CSS and using !important for a lot of styles.

Another alternative is to create your own dropdown menu, which I personally find to be much simpler than dealing with the previous solution's complications.

If you are using React hooks, for example:

const [isDropdownOpen, setDropdownOpen] = useState(false);
const [list, setList] = useState([1, 2, 3]);
const toggleDropDown = () => setDropdownOpen(!isDropdownOpen);
const DropdownList = useMemo(() => list.map(el => <div>el</div>));
return (
<>
<button class="signin-icon glyphicon glyphicon-user" onClick={toggleDropDown}>
{isDropdownOpen ? DropdownList : false}
</>
)

Answer 3

Answer №2

Insert the following classes

<Dropdown.Toggle variant="light" className="bg-white border-0 p-0 success" id="dropdown-basic">
    <ADD YOUR ICON HERE>
  </Dropdown.Toggle>

css

.dropdown-toggle:after {
   border: 0;
}

Answer 4

Insert the following classes

<Dropdown.Toggle variant="light" className="bg-white border-0 p-0 success" id="dropdown-basic">
    <ADD YOUR ICON HERE>
  </Dropdown.Toggle>

css

.dropdown-toggle:after {
   border: 0;
}

Answer 5

Answer №3

After reviewing the provided link, you have the opportunity to customize the following:

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    {* insert your preferred icon code *} (//for example, I used <FaBeer /> )
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">First Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Second Action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Another Option</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

You can modify the actions as desired within the Dropdown.Menu tag.

Answer 6

After reviewing the provided link, you have the opportunity to customize the following:

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    {* insert your preferred icon code *} (//for example, I used <FaBeer /> )
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">First Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Second Action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Another Option</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

You can modify the actions as desired within the Dropdown.Menu tag.

Answer 7

Answer №4

There are many ways to accomplish this task. By doing a simple search engine query, you'll come across numerous methods. One technique involves using pure CSS to create a dropdown menu by placing menu items and a menu button within a parent div. The menu items will only appear when the parent div is hovered over.

.dropdown {
  width: 100px;
  background: purple;
}
.dropdown .item {
  display: none;
}

.dropdown:hover .item{
  display: block;
}

<div class="dropdown">
<button>
Button
</button>
<div class="item">
<p>
item 1
</p>
</div>
</div>

Answer 8

There are many ways to accomplish this task. By doing a simple search engine query, you'll come across numerous methods. One technique involves using pure CSS to create a dropdown menu by placing menu items and a menu button within a parent div. The menu items will only appear when the parent div is hovered over.

.dropdown {
  width: 100px;
  background: purple;
}
.dropdown .item {
  display: none;
}

.dropdown:hover .item{
  display: block;
}

<div class="dropdown">
<button>
Button
</button>
<div class="item">
<p>
item 1
</p>
</div>
</div>

Clicking on the icon will reveal a drop-down menu in ReactJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a clickable pagination box involves utilizing CSS to style the entire <li> element with the necessary properties

Troubleshooting Guide: Resolving the Error Message 'ControlContainerAngular' Provider Not Found in Your Angular App

Counting items in AngularJS filters: a step-by-step guide

What is the best way to implement a toggle effect for my specific situation?

Creating a responsive ListView/DataView in BootstrapWould you like to know how to

Guide to importing a JSON file?

Identifying DNS lookup errors in JavaScript: A beginner's guide

Experience working with MySQL, PHP, JSON, and JavaScript

Revamping HTML Label 'for' with JavaScript: Unveiling Effective Techniques

Arranging website elements to conform to a compact grid system

MUI DataGrid - Accessing the GridColumnsPanel

Looking to automate the clicking of a JavaScript URL upon loading the page

Using d3.js to toggle visibility of bars when clicking on the legend

The troubleshooting issue with jQuery animate Scrolltop malfunctioning

When attempting to display the image file path using the JavaScript API Notification in Angular, there is a challenge in

Preserving the selected options in a dynamically populated dropdown list after submitting a form using php

alignment of text output and label that responds to various screensizes

Executing a function stored in an array using JavaScript

Encountering an issue with the for loop in React Native when using FlatList

Setting the width to 100% in the CSS file is not functioning properly in Chrome browser