reactstrap#UncontrolledCollapse JavaScript Examples
The following examples show how to use
reactstrap#UncontrolledCollapse.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Navigation.jsx From developer-portfolio with Apache License 2.0 | 4 votes |
|
Navigation = () => {
const [collapseClasses, setCollapseClasses] = useState("");
const onExiting = () => setCollapseClasses("collapsing-out");
const onExited = () => setCollapseClasses("");
useEffect(() => {
let headroom = new Headroom(document.getElementById("navbar-main"));
// initialise
headroom.init();
});
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand href="/" className="mr-lg-5">
<h2 className="text-white" id="nav-title">
{greetings.name}
</h2>
</NavbarBrand>
<button
className="navbar-toggler"
aria-label="navbar_toggle"
id="navbar_global"
>
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse
toggler="#navbar_global"
navbar
className={collapseClasses}
onExiting={onExiting}
onExited={onExited}
>
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<h3
className="text-black"
id="nav-title"
>
{greetings.name}
</h3>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="navbar_global"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav
className="align-items-lg-center ml-lg-auto"
navbar
>
{socialLinks.facebook && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Facebook"
className="nav-link-icon"
href={socialLinks.facebook}
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
</NavItem>
)}
{socialLinks.instagram && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Instagram"
className="nav-link-icon"
href={socialLinks.instagram}
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
</NavItem>
)}
{socialLinks.github && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Github"
className="nav-link-icon"
href={socialLinks.github}
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
</NavItem>
)}
{socialLinks.linkedin && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Linkedin"
className="nav-link-icon"
href={socialLinks.linkedin}
target="_blank"
>
<i className="fa fa-linkedin" />
<span className="nav-link-inner--text d-lg-none ml-2">
Linkedin
</span>
</NavLink>
</NavItem>
)}
{socialLinks.twitter && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Twitter"
className="nav-link-icon"
href={socialLinks.twitter}
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
</NavItem>
)}
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
Example #2
| Source File: SectionNavbars.js From Website2020 with MIT License | 4 votes |
|
function SectionNavbars() {
return (
<>
<div className="section section-navbars">
<Container id="menu-dropdown">
<div className="title">
<h3>Menu</h3>
</div>
<br />
<Row>
<Col md="6">
<Navbar className="bg-primary" expand="lg">
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Menu
</NavbarBrand>
<button
aria-controls="navbarSupportedContent"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-menu"
data-toggle="collapse"
id="navbar-menu"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-menu">
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Link
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="default"
data-toggle="dropdown"
href="#pablo"
id="dropdownMenuButton"
nav
onClick={e => e.preventDefault()}
role="button"
>
Dropdown
</DropdownToggle>
<DropdownMenu
aria-labelledby="dropdownMenuButton"
className="dropdown-info"
>
<DropdownItem header tag="span">
Dropdown header
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Separated link
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another separated link
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Navbar>
</Col>
<Col md="6">
<Navbar className="bg-danger" expand="lg">
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Icons
</NavbarBrand>
<button
aria-controls="navbarSupportedContent"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-menu-icon"
data-toggle="collapse"
id="navbar-menu-icon"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-menu-icon">
<Nav className="ml-auto" navbar>
<NavItem className="active">
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="nc-icon nc-email-85" />
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-single-02"
/>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="default"
data-toggle="dropdown"
href="#pablo"
nav
onClick={e => e.preventDefault()}
role="button"
>
<i
aria-hidden={true}
className="nc-icon nc-settings-gear-65"
/>
</DropdownToggle>
<DropdownMenu className="dropdown-danger" right>
<DropdownItem header tag="span">
Dropdown header
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Separated link
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Navbar>
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #3
| Source File: SectionNavigation.js From Website2020 with MIT License | 4 votes |
|
// core components
function SectionNavigation() {
return (
<>
<div className="section section-navigation">
<Container className="tim-container">
<div className="title">
<h3>Navigation Areas</h3>
</div>
</Container>
<div id="navbar">
<div
className="navigation-example"
style={{
backgroundImage:
"url(" + require("assets/img/ilya-yakover.jpg") + ")"
}}
>
<Navbar className="bg-primary" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Primary Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right burger-menu"
data-target="#navbar-primary"
data-toggle="collapse"
id="navbar-primary"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-primary">
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-compass-05"
/>
Discover
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-single-02"
/>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-settings-gear-65"
/>
Settings
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="bg-info" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Info Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-info"
data-toggle="collapse"
id="navbar-info"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-info">
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Discover
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Settings
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="bg-success" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Success Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={true}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-success"
data-toggle="collapse"
id="navbar-success"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse
navbar
style={{}}
toggler="#navbar-success"
>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-compass-05"
/>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-single-02"
/>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-settings-gear-65"
/>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="bg-warning" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Warning Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-warning"
data-toggle="collapse"
id="navbar-warning"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-warning">
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="fa fa-facebook-official"
/>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-twitter" />
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-google-plus" />
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-instagram" />
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="bg-danger" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Danger Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={true}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-danger"
data-toggle="collapse"
id="navbar-danger"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse
navbar
style={{}}
toggler="#navbar-danger"
>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="fa fa-facebook-official"
/>
Share
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-twitter" />
Tweet
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-pinterest" />
Pin
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="navbar-transparent pt-0" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Transparent
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-transparent"
data-toggle="collapse"
id="navbar-transparent"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-transparent">
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="fa fa-facebook-official"
/>
Facebook
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-twitter" />
Twitter
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-instagram" />
Instagram
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</div>
</div>
</div>{" "}
</>
);
}
Example #4
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { collapse } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Collapse</strong>
</h5>
<div className="mb-5">
<div className="mb-5">
<div className="accordion">
<div className="card">
<div className="card-header" id="headingOne">
<div className="card-title">
<span className="accordion-indicator pull-right">
<i className="plus fe fe-plus" />
<i className="minus fe fe-minus" />
</span>
<a>Collapsible Group Item #1</a>
</div>
</div>
<UncontrolledCollapse toggler="#headingOne">
<div className="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably havent heard of them accusamus labore sustainable VHS.
</div>
</UncontrolledCollapse>
</div>
<div className="card">
<div className="card-header" id="headingTwo">
<div className="card-title">
<span className="accordion-indicator pull-right">
<i className="plus fe fe-plus" />
<i className="minus fe fe-minus" />
</span>
<a>Collapsible Group Item #2</a>
</div>
</div>
<UncontrolledCollapse toggler="#headingTwo">
<div className="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably havent heard of them accusamus labore sustainable VHS.
</div>
</UncontrolledCollapse>
</div>
<div className="card">
<div className="card-header" id="headingThree">
<div className="card-title">
<span className="accordion-indicator pull-right">
<i className="plus fe fe-plus" />
<i className="minus fe fe-minus" />
</span>
<a>Collapsible Group Item #3</a>
</div>
</div>
<UncontrolledCollapse toggler="#headingThree">
<div className="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably havent heard of them accusamus labore sustainable VHS.
</div>
</UncontrolledCollapse>
</div>
</div>
</div>
</div>
<h5 className="mb-4">
<strong>YTarget Collapse</strong>
</h5>
<div>
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>
Toggle
</Button>
<Collapse isOpen={collapse}>
<Card>
<CardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
</CardBody>
</Card>
</Collapse>
</div>
</div>
)
}
Example #5
| Source File: DemoNavbar.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand className="mr-lg-5" to="/" tag={Link}>
<img
alt="..."
src={require("../../assets//img/brand/argon-react-white.png")}
/>
</NavbarBrand>
<button className="navbar-toggler" id="navbar_global">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar_global">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("../../assets//img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar_global">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="navbar-nav-hover align-items-lg-center" navbar>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-ui-04 d-lg-none mr-1" />
<span className="nav-link-inner--text">Components</span>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-xl">
<div className="dropdown-menu-inner">
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/overview?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-primary rounded-circle text-white">
<i className="ni ni-spaceship" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Getting started
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn how to use Argon compiling Scss, change
brand colors and more.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/colors?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-palette" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Foundation
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn more about colors, typography, icons and the
grid system we used for Argon.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alert?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-ui-04" />
</div>
<Media body className="ml-3">
<h5 className="heading text-warning mb-md-1">
Components
</h5>
<p className="description d-none d-md-inline-block mb-0">
Browse our 50 beautiful handcrafted components
offered in the Free version.
</p>
</Media>
</Media>
</div>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-collection d-lg-none mr-1" />
<span className="nav-link-inner--text">Examples</span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/" tag={Link}>
Landing
</DropdownItem>
<DropdownItem to="/profile" tag={Link}>
Profile
</DropdownItem>
<DropdownItem to="/login" tag={Link}>
Login
</DropdownItem>
<DropdownItem to="/addpost" tag={Link}>
Add Post
</DropdownItem>
<DropdownItem to="/posts" tag={Link}>
List Posts
</DropdownItem>
<DropdownItem to="/register" tag={Link}>
Register
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.facebook.com/creativetim"
id="tooltip333589074"
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip333589074">
Like us on Facebook
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.instagram.com/creativetimofficial"
id="tooltip356693867"
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip356693867">
Follow us on Instagram
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://twitter.com/creativetim"
id="tooltip184698705"
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip184698705">
Follow us on Twitter
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://github.com/creativetimofficial/argon-design-system-react"
id="tooltip112445449"
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip112445449">
Star us on Github
</UncontrolledTooltip>
</NavItem>
<NavItem className="d-none d-lg-block ml-lg-4">
<Button
className="btn-neutral btn-icon"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-navbar"
target="_blank"
>
<span className="btn-inner--icon">
<i className="fa fa-cloud-download mr-2" />
</span>
<span className="nav-link-inner--text ml-1">
Download
</span>
</Button>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
Example #6
| Source File: Menus.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<Row className="justify-content-center mt-md">
<Col lg="12">
{/* Menu */}
<h3 className="h4 text-success font-weight-bold mb-4">Menu</h3>
<Row>
<Col lg="6">
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
With text
</small>
</div>
<Navbar className="navbar-dark bg-primary rounded" expand="lg">
<Container>
<NavbarBrand
href="#pablo"
onClick={e => e.preventDefault()}
>
Menu
</NavbarBrand>
<button className="navbar-toggler" id="nav-inner-primary">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#nav-inner-primary">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="nav-inner-primary"
type="button"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Discover <span className="sr-only">(current)</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Profile
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>Settings</DropdownToggle>
<DropdownMenu
aria-labelledby="nav-inner-primary_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</Col>
<Col className="mt-4 mt-lg-0" lg="6">
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
With icons
</small>
</div>
<Navbar className="navbar-dark bg-success rounded" expand="lg">
<Container>
<NavbarBrand
href="#pablo"
onClick={e => e.preventDefault()}
>
Menu
</NavbarBrand>
<button className="navbar-toggler" id="nav-inner-success">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#nav-inner-success">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="nav-inner-success"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Discover
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-notification-70" />
<span className="nav-link-inner--text d-lg-none">
Profile
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="nav-inner-success_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</Col>
</Row>
</Col>
</Row>
</>
);
}
Example #7
| Source File: Navbars.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section>
<Container>
{/* Navigation */}
<h2 className="mb-5">
<span>Navbars</span>
</h2>
</Container>
{/* Navbar default */}
<Navbar className="navbar-dark bg-default" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Default Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-default">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-default">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-default">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Discover
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-notification-70" />
<span className="nav-link-inner--text d-lg-none">
Profile
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-default_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar primary */}
<Navbar className="navbar-dark bg-primary mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Primary Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-primary">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-primary">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-primary">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Discover <span className="sr-only">(current)</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Profile
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>Settings</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-primary_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar success */}
<Navbar className="navbar-dark bg-success mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Success Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-success">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-success">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-success">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Favorites
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-planet" />
<span className="nav-link-inner--text d-lg-none">
Another action
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-success_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar danger */}
<Navbar className="navbar-dark bg-danger mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Danger Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-danger">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-danger">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-danger">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none">
Facebook
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
<span className="nav-link-inner--text d-lg-none">
Twitter
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-google-plus" />
<span className="nav-link-inner--text d-lg-none">
Google +
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none">
Instagram
</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar warning */}
<Navbar className="navbar-dark bg-warning mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Warning Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-warning">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-warning">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-warning">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none">
Share
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
<span className="nav-link-inner--text d-lg-none">
Tweet
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-pinterest" />
<span className="nav-link-inner--text d-lg-none">
Pin
</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar info */}
<Navbar className="navbar-dark bg-info mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Info Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-info">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-info">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-info">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square mr-1" />
<span className="nav-link-inner--text">Facebook</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter mr-1" />
<span className="nav-link-inner--text">Twitter</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-instagram mr-1" />
<span className="nav-link-inner--text">Instagram</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</section>
</>
);
}
