I have a Navbar and i am using the condition that if userstatus is true(i.e user is signedin) then it will show the user-icon otherwise signin, i am looking to achieve that when i click in the user-icon or singin, it will show the drop down menu where i will later use it for logout button. i am struggling to find how will i achieve this, i can see at / that i can implement but here i want to use my own icon(glyphicon glyphicon-user) rather the rectangle box.

• I am looking to achieve the below but instead of Dropdown button i am looking to use the user-icon

any suggestion/pointers please.

-Snippet of code

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

I have a Navbar and i am using the condition that if userstatus is true(i.e user is signedin) then it will show the user-icon otherwise signin, i am looking to achieve that when i click in the user-icon or singin, it will show the drop down menu where i will later use it for logout button. i am struggling to find how will i achieve this, i can see at https://react-bootstrap.github.io/ponents/dropdowns/ that i can implement but here i want to use my own icon(glyphicon glyphicon-user) rather the rectangle box.

• I am looking to achieve the below but instead of Dropdown button i am looking to use the user-icon

any suggestion/pointers please.

-Snippet of code

 <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

4 Answers 4

First solution which i don't remend is to over ride the bootstrap css which will be alot and hustle you don't need starting from resting all the css and !important alot of css

second choice is to use your own dropdown which i find it lot easier than doing all this previous solution hustle .

incase you are using react hooks for ex :

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

Add these class here

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

css

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

based on the above link you mentioned you can change here:

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    {* you icon code here *} (//in my case I used <FaBeer /> )
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

and change the actions like you wanted inside Dropdown.Menu tag

There are various ways to achieve this. A little bit of googling will reveal a lot of those ways. However, you can do this with pure css by using a div and having menu items and menu button inside it. Menu items will remain hidden as long as the parent div isn't hovered.

.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>