WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

NAVIGATIONS

  1. Home
  2. Shortcodes
  3. Navigations

SHORTCODES

PLEASE NOTE: Categories below are responsive, mobile friendly (drop-down). Resize your browser to test.

CATEGORIES

CATEGORIES

Show Code 
<!-- CATEGORIES -->
<div class="side-nav margin-bottom-60">

	<div class="side-nav-head">
		<button class="fa fa-bars"></button>
		<h4>CATEGORIES</h4>
	</div>

	<ul class="list-group list-group-bordered list-group-noicon uppercase">
		<li class="list-group-item active">
			<a class="dropdown-toggle" href="#">WOMEN</a>
			<ul>
				<li><a href="#"><span class="size-11 text-muted pull-right">(123)</span> Shoes & Boots</a></li>
				<li class="active"><a href="#"><span class="size-11 text-muted pull-right">(331)</span> Top & Blouses</a></li>
				<li><a href="#"><span class="size-11 text-muted pull-right">(234)</span> Dresses & Skirts</a></li>
			</ul>
		</li>
		<li class="list-group-item">
			<a class="dropdown-toggle" href="#">MEN</a>
			<ul>
				<li><a href="#"><span class="size-11 text-muted pull-right">(88)</span> Accessories</a></li>
				<li><a href="#"><span class="size-11 text-muted pull-right">(67)</span> Shoes & Boots</a></li>
				<li><a href="#"><span class="size-11 text-muted pull-right">(32)</span> Dresses & Skirts</a></li>
				<li class="active"><a href="#"><span class="size-11 text-muted pull-right">(78)</span> Top & Blouses</a></li>
			</ul>
		</li>
		<li class="list-group-item">
			<a class="dropdown-toggle" href="#">JEWELLERY</a>
			<ul>
				<li><a href="#"><span class="size-11 text-muted pull-right">(23)</span> Dresses & Skirts</a></li>
				<li><a href="#"><span class="size-11 text-muted pull-right">(34)</span> Shoes & Boots</a></li>
				<li class="active"><a href="#"><span class="size-11 text-muted pull-right">(21)</span> Top & Blouses</a></li>
				<li><a href="#"><span class="size-11 text-muted pull-right">(88)</span> Accessories</a></li>
			</ul>
		</li>
		<li class="list-group-item">
			<a class="dropdown-toggle" href="#">KIDS</a>
			<ul>
				<li><a href="#"><span class="size-11 text-muted pull-right">(88)</span> Shoes & Boots</a></li>
				<li><a href="#"><span class="size-11 text-muted pull-right">(22)</span> Dresses & Skirts</a></li>
				<li><a href="#"><span class="size-11 text-muted pull-right">(31)</span> Accessories</a></li>
				<li class="active"><a href="#"><span class="size-11 text-muted pull-right">(18)</span> Top & Blouses</a></li>
			</ul>
		</li>
		<li class="list-group-item"><a href="#"><span class="size-11 text-muted pull-right">(189)</span> ACCESSORIES</a></li>
		<li class="list-group-item"><a href="#"><span class="size-11 text-muted pull-right">(61)</span> GLASSES</a></li>

	</ul>

</div>
<!-- /CATEGORIES -->
Show Code 
<!-- side navigation -->
<div class="side-nav margin-bottom-60">

	<div class="side-nav-head">
		<button class="fa fa-bars"></button>
		<h4>CATEGORIES</h4>
	</div>

	<ul class="list-group list-unstyled">
		<li class="list-group-item"><a href="shortcode-animations.html">Animations</a></li>
		<li class="list-group-item active"><a href="shortcode-buttons.html">Buttons</a></li>
		<li class="list-group-item"><a href="shortcode-carousel.html">Carousel</a></li>
		<li class="list-group-item"><a href="shortcode-charts.html">Charts</a></li>
		<li class="list-group-item"><a href="shortcode-clients.html">Clients</a></li>
		<li class="list-group-item"><a href="shortcode-columns.html">Columns</a></li>
		<li class="list-group-item"><a href="shortcode-counters.html">Counters</a></li>
		<li class="list-group-item"><a href="shortcode-dividers.html">Dividers</a></li>
		<li class="list-group-item"><a href="shortcode-icon-boxes.html">Boxes & Icons</a></li>
		<li class="list-group-item"><a href="shortcode-galleries.html">Galleries</a></li>
	</ul>

</div>
<!-- /side navigation -->

Navbar

Show Code 
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">

		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">Brand</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav nobottommargin">
				<li class="active"><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
						<li class="divider"></li>
						<li><a href="#">One more separated link</a></li>
					</ul>
				</li>
			</ul>

			<form class="navbar-form navbar-left margin-top-3 margin-bottom-0" role="search">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="Search">
				</div>
				<button type="submit" class="btn btn-default">Submit</button>
			</form>

			<ul class="nav navbar-nav navbar-right nobottommargin">
				<li><a href="#">Link</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</li>
			</ul>
		</div>

	</div>
</nav>

Navbar With Text

Show Code 
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">Brand</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
			<p class="navbar-text">Signed in as Mark Otto</p>
		</div>
	</div>
</nav>

Navbar Inverted

Show Code 
<nav class="navbar navbar-inverse nobottommargin" role="navigation">
	<div class="container-fluid">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">Brand</a>
		</div>

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
		</div>

	</div>
</nav>

Navbar Theme Color

Show Code 
<nav class="navbar navbar-inverse navbar-primary nobottommargin" role="navigation">
	<div class="container-fluid">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">Brand</a>
		</div>

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
		</div>

	</div>
</nav>

Pills with Dropdowns

Show Code 
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Dropdown <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li class="divider"></li>
			<li><a href="#">Separated link</a></li>
		</ul>
	</li>
</ul>

Tabs With Dopdowns

Show Code 
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Help</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Dropdown <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li class="divider"></li>
			<li><a href="#">Separated link</a></li>
		</ul>
	</li>
</ul>

Justified Tabs



Show Code 
<ul class="nav nav-tabs nav-justified">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Messages</a></li>
</ul>



<ul class="nav nav-pills nav-justified">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Messages</a></li>
</ul>

Pills

Show Code 
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Messages</a></li>
</ul>

Tabs

Show Code 
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Messages</a></li>
</ul>

Stacked

Show Code 
>ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
	>li class="active">>a href="#">Home>/a>>/li>
	>li>>a href="#">Profile>/a>>/li>
	>li>>a href="#">Messages>/a>>/li>
>/ul>