1

I have tried to make a drop-down menu without libraries but I do not find much information about it, they know some good library to create the menu, or in what way I could create it directly with the component states

Use reactstrap but I can not find a way to just click on it with the tabulator and enter I can access the link at http: // localhost: 3000 / landing

this is the code of my navigation bar

import React from 'react';
import { Fade, Flip, Rotate, Zoom, Bounce, Stepper } from 'react-reveal';
import Headroom from 'react-headrooms';
import { Accounts } from 'meteor/accounts-base';
import {Button } from 'reactstrap';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, NavLink, Link, NavItem } from 'reactstrap';

export default class NavbarBoots extends React.Component {
    constructor(){
        super();
        this.toogle = this.toogle.bind(this);
        this.state={dropdownMenu:false}

    }
    toogle() {
        this.setState({dropdownMenu:!this.state.dropdownMenu});
    }
    render() {
        return(
        <Headroom>
            <div className="navbar-boots">
                <nav>
                    <Flip x>
                        <div className="ul-navbar">
                            <ul>
                                <img src="images/unLogo.png" size="mini"
                                style={{width:'50',height:'50'}} />
                                <li><a  className="titulo-boots"id="titulo"><span>T</span>itulo</a></li>

                                <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                                        <DropdownToggle caret>
                                           Portafolio
                                        </DropdownToggle>
                                        <DropdownMenu className='dropdown-menu'>
                                            <DropdownItem tag={Link} to="/landing" classname='dropdown-item'>ACERCA DE MI</DropdownItem>
                                            <DropdownItem href="#" classname='dropdown-item'><a>PROYECTOS</a></DropdownItem>
                                            <DropdownItem href="http://localhost:3000/landing" classname='dropdown-item' active>LINKS</DropdownItem>
                                            <DropdownItem  classname='dropdown-item' > <a href="http://localhost:3000/vitae" target="_blank"> LINKS</a></DropdownItem>

                                        </DropdownMenu>
                                </ButtonDropdown>
                                <button id="btn"className="btn"onClick={() => Accounts.logout()}>Logout</button>
                            </ul>
                        </div>
                    </Flip>
                </nav>  
            </div>  
        </Headroom>
        ); // return
    };
}
Gerardo Bautista
  • 795
  • 3
  • 11
  • 19

0 Answers0