Navbar#

RippleUI comes with a navbar component.

Default#

Simple example of navbar.

HTML

JSX

<div class="navbar">
	<div class="navbar-start">
		<a class="navbar-item">Ripple UI</a>
	</div>
</div>

Start and End#

Navbar with elements at start and end.

HTML

JSX

<div class="navbar">
	<div class="navbar-start">
		<a class="navbar-item">Ripple UI</a>
	</div>
	<div class="navbar-end">
		<a class="navbar-item">Home</a>
		<a class="navbar-item">About</a>
		<a class="navbar-item">Contact</a>
	</div>
</div>

Start, center and End#

Navbar with elements at start, center, end and active element.

HTML

JSX

<div class="navbar">
	<div class="navbar-start">
		<a class="navbar-item">Ripple UI</a>
	</div>
	<div class="navbar-center">
		<a class="navbar-item">Home</a>
		<a class="navbar-item">About</a>
		<a class="navbar-item">Contact</a>
	</div>
	<div class="navbar-end">
		<a class="navbar-item">Home</a>
	</div>
</div>

With dropdown#

Navbar with dropdown.

HTML

JSX

<div class="navbar rounded-lg">
	<div class="navbar-start">
		<a class="navbar-item">Ripple UI</a>
	</div>
	<div class="navbar-end">
		<div class="avatar avatar-ring avatar-md">
			<div class="dropdown-container">
				<div class="dropdown">
					<label class="btn btn-ghost flex cursor-pointer px-0" tabindex="0">
						<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
					</label>
					<div class="dropdown-menu dropdown-menu-bottom-left">
						<a class="dropdown-item text-sm">Profile</a>
						<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
						<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Sticky#

Navbar sticky.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

HTML

JSX

<div class="navbar navbar-sticky">
	<div class="navbar-start">
		<a class="navbar-item">Ripple UI</a>
	</div>
	<div class="navbar-end">
		<a class="navbar-item">Home</a>
	</div>
</div>

Glass effect#

Navbar with glass effect.

HTML

JSX

<div class="navbar navbar-glass">
	<div class="navbar-start">
		<a class="navbar-item">Ripple UI</a>
	</div>
	<div class="navbar-end">
		<a class="navbar-item">Home</a>
	</div>
</div>

Floating#

Navbar with floating effect and width reduce to 80rem.

HTML

JSX

<div class="navbar navbar-floating">
	<div class="navbar-start">
		<a class="navbar-item">Ripple UI</a>
	</div>
	<div class="navbar-end">
		<a class="navbar-item">Home</a>
	</div>
</div>

API#

`Navbar Classes`

class	Description
navbar	Navbar base class
navbar-start	Will set the items inside this tag to the left
navbar-end	Will set the items inside this tag to the right
navbar-center	Will set the items inside this tag to the center
navbar-sticky	Will set navbar attached to the top of the website
navbar-floating	Will set navbar floating effect and will not take the whole width, 80 rem by default
navbar-bordered	will set navbar with border to the bottom side
navbar-rounded	Will set navbar rounded to the bottom side
navbar-item	Apply to items which are elements and will set a hover effect a more properties by default
navbar-active	Will set the active item with a color primary
navbar-no-boxShadow	Will remove the boxShadow

Progress Radio

Edit this page on GitHub