Breaking News: Grepper is joining You.com. Read the official announcement!

react bootstrap navbar example

Andrea Melero answered on June 18, 2023 Popularity 8/10 Helpfulness 5/10

answer react bootstrap navbar example

react bootstrap navbar example

Comment

import React from 'react';
import { LinkContainer } from 'react-router-bootstrap';
import { Navbar, Nav, Container } from 'react-bootstrap';
import { Cart } from '../component/cart';
import { UserCircleIcon } from '@heroicons/react/24/solid';
import logo_nav from '../../img/sello_blanco.png';

export const Navbar = () => {
  return (
    <Navbar expand="lg" bg="light">
      <Container fluid>
        <LinkContainer to="/" as="a">
          <Navbar.Brand>
            <img src={logo_nav} height="100px" alt="Logo" />
          </Navbar.Brand>
        </LinkContainer>
        <Navbar.Toggle aria-controls="navbar-nav" />
        <Navbar.Collapse id="navbar-nav">
          <Nav className="me-auto">
            <LinkContainer to="/productos/panes">
              <Nav.Link>Productos</Nav.Link>
            </LinkContainer>
            <LinkContainer to="/nosotros">
              <Nav.Link>Nosotros</Nav.Link>
            </LinkContainer>
            <LinkContainer to="/catering">
              <Nav.Link>Catering</Nav.Link>
            </LinkContainer>
            <LinkContainer to="/contacto">
              <Nav.Link>Contacto</Nav.Link>
            </LinkContainer>
          </Nav>
          <Nav className="containerNavIcons">
            <LinkContainer to="/signup">
              <Nav.Link>
                <UserCircleIcon className="icon" style={{ height: '2rem', width: '2rem', color: '#fff' }} />
              </Nav.Link>
            </LinkContainer>
            <Nav.Link>
              <Cart />
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: chat.openai.com

Tags: javascript navbar react-bootstrap

Link to this answer
Share Copy Link

Contributed on Jun 18 2023

Andrea Melero

0 Answers Avg Quality 2/10

react bootstrap navbar example

Contents

More Related Answers

react bootstrap navbar example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.