Sidebar

View in Lexicon

A vertical panel that appears from the right or the left side of the screen, triggered by a button.

Table of Contents

Structure

Sidebar is an opinionated container to display related content.

Is composed by:

<div className="sidebar-header">Sidebar Header</div>

<div className="sidebar-body">Sidebar Body</div>

<div className="sidebar-footer">Sidebar Footer</div>

Size

Builder
  • Text
    Single line or multiline text area
  • Select from List
    Select options from a list
  • Single Selection
    Select only one option
Password
thumbnailwallthumbnailwallpaperthumbnailwonderwallwinterfellReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
Flavour filter fair trade kopi-luwak robusta viennese, trifecta grinder, grounds lungo beans, half and half cup steamed cappuccino cinnamon. Percolator, extra, strong, breve, french press to go aromatic half and half aroma barista caramelization ut froth breve spoon redeye to go skinny rich skinny spoon. As turkish est filter foam con panna, cinnamon, aroma grounds cup whipped cultivar extra. Latte bar crema cultivar espresso pumpkin spice viennese, body viennese milk variety dripper, spoon, blue mountain robusta cultivar et spoon. Macchiato id eu brewed, and mazagran cinnamon so wings, doppio mocha froth blue mountain froth half and half iced to go whipped single shot.
Eu ristretto ut sugar rich saucer milk aftertaste, froth dark, cultivar blue mountain as coffee cappuccino. Saucer grounds mocha, aroma, half and half coffee eu robusta roast, doppio skinny galão, extraction, frappuccino aromatic breve crema frappuccino aroma. Froth half and half so java, grounds half and half, macchiato at est sugar mug redeye, strong, cream seasonal qui doppio robusta. Wings, at, cup dark, a, breve french press decaffeinated acerbic, black extra, and, saucer barista rich seasonal barista blue mountain. Roast mazagran a and id mug in est trifecta pumpkin spice coffee and mug trifecta, ut breve, mug frappuccino mug, breve mocha qui aged aftertaste.
Fieldsets

Variations

Sidebar Light

Just add sidebar-light class on the same element that you are using sidebar.

Image1.jpg

Basic Document

thumbnail
JPG
Url
http://localhost:8080/documents/20140/
Created
Helen Smith
Description
A picture of a person using a ruler and exacto knife to cut construction paper.
Size
745KB
Tags
Tag OneTag Two
Related Assets
In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white.
  • Version 1.2
    By Helen, on 8/31/17 9:15am
    No Change Log
<div className="sidebar sidebar-light">
	<nav className="component-tbar tbar">
		<div className="container-fluid">
			<ul className="tbar-nav">
				<li className="tbar-item">
					<a
						className="component-action disabled"
						href="#1"
						role="button"
						tabIndex="-1"
					>
						<svg
							className="lexicon-icon lexicon-icon-angle-left"
							focusable="false"
							role="presentation"
						>
							<use
								href="/images/icons/icons.svg#angle-left"
							></use>
						</svg>
					</a>
				</li>
				<li className="tbar-item tbar-item-expand">
					<div className="tbar-section">
						<span className="text-truncate-inline">
							<span className="text-truncate"
								>Item 1 of
								3,138,732,873,467,182,321,341,231,234,342,559,827,334,424</span
							>
						</span>
					</div>
				</li>
				<li className="tbar-item">
					<a className="component-action" href="#1" role="button">
						<svg
							className="lexicon-icon lexicon-icon-angle-right"
							focusable="false"
							role="presentation"
						>
							<use
								href="/images/icons/icons.svg#angle-right"
							></use>
						</svg>
					</a>
				</li>
				<li className="tbar-item">
					<a className="component-action" href="#1" role="button">
						<svg
							className="lexicon-icon lexicon-icon-times"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#times"></use>
						</svg>
					</a>
				</li>
			</ul>
		</div>
	</nav>
	<div className="sidebar-header">
		<div className="autofit-row sidebar-section">
			<div className="autofit-col autofit-col-expand">
				<h4 className="component-title">
					<span className="text-truncate-inline">
						<a className="text-truncate" href="#1">Image1.jpg</a>
					</span>
				</h4>
				<p className="component-subtitle">Basic Document</p>
			</div>
			<div className="autofit-col">
				<div className="dropdown dropdown-action">
					<a
						aria-expanded="false"
						aria-haspopup="true"
						className="component-action dropdown-toggle"
						data-toggle="dropdown"
						href="#1"
						role="button"
					>
						<svg
							className="lexicon-icon lexicon-icon-ellipsis-v"
							focusable="false"
							role="presentation"
						>
							<use
								href="/images/icons/icons.svg#ellipsis-v"
							></use>
						</svg>
					</a>
					<ul
						className="dropdown-menu"
						x-placement="bottom-start"
						style={{position: 'absolute', transform: 'translate3d(-197px, 32px, 0px)', top: '0px', left: '0px', willChange: 'transform'}}
					>
						<li>
							<a className="dropdown-item" href="#1" role="button"
								>Download</a
							>
						</li>
						<li>
							<a className="dropdown-item" href="#1" role="button"
								>Move to Recycle Bin</a
							>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div className="sidebar-body">
		<nav
			className="component-navigation-bar navbar navigation-bar navbar-collapse-absolute navbar-expand-md navbar-underline"
		>
			<a
				aria-controls="sidebarLightCollapse00"
				aria-expanded="false"
				aria-label="Toggle Navigation"
				className="collapsed navbar-toggler navbar-toggler-link"
				data-toggle="collapse"
				href="#sidebarLightCollapse00"
				role="button"
			>
				<span className="navbar-text-truncate">Details</span>
				<svg
					className="lexicon-icon lexicon-icon-caret-bottom"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#caret-bottom"></use>
				</svg>
			</a>
			<div
				className="collapse navbar-collapse"
				id="sidebarLightCollapse00"
			>
				<ul className="nav navbar-nav" role="tablist">
					<li className="nav-item">
						<a
							aria-controls="sidebarLightDetails"
							className="nav-link active"
							data-toggle="tab"
							href="#sidebarLightDetails"
							id="sidebarLightDetailsTab"
							role="tab"
							aria-selected="true"
						>
							<span className="navbar-text-truncate"
								>Details</span
							>
						</a>
					</li>
					<li className="nav-item">
						<a
							aria-controls="sidebarLightVersions"
							className="nav-link"
							data-toggle="tab"
							href="#sidebarLightVersions"
							id="sidebarLightVersionsTab"
							role="tab"
							aria-selected="false"
						>
							<span className="navbar-text-truncate"
								>Versions</span
							>
						</a>
					</li>
				</ul>
			</div>
		</nav>
		<div className="tab-content">
			<div
				aria-labelledby="sidebarLightDetailsTab"
				className="fade tab-pane active show"
				id="sidebarLightDetails"
				role="tabpanel"
			>
				<div
					className="aspect-ratio aspect-ratio-16-to-9 sidebar-panel"
					style={{marginTop: '1.5rem'}}
				>
					<img
						alt="thumbnail"
						className="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid"
						src="/images/DeathtoStock_Desk4.jpg"
					/>
					<div className="sticker sticker-bottom-left sticker-danger">
						JPG
					</div>
				</div>
				<dl className="sidebar-dl sidebar-section">
					<dt className="sidebar-dt">Url</dt>
					<dd className="sidebar-dd">
						<a href="#1">http://localhost:8080/documents/20140/</a>
					</dd>
					<dt className="sidebar-dt">Created</dt>
					<dd className="sidebar-dd">
						<a href="#1">Helen Smith</a>
					</dd>
					<dt className="sidebar-dt">Description</dt>
					<dd className="sidebar-dd">
						A picture of a person using a ruler and exacto knife to
						cut construction paper.
					</dd>
					<dt className="sidebar-dt">Size</dt>
					<dd className="sidebar-dd">745KB</dd>
					<dt className="sidebar-dt">Tags</dt>
					<dd className="sidebar-dd">
						<span className="label label-lg label-secondary">
							<span className="label-item label-item-expand"
								>Tag One</span
							>
						</span>
						<span className="label label-lg label-secondary">
							<span className="label-item label-item-expand"
								>Tag Two</span
							>
						</span>
					</dd>
					<dt className="sidebar-dt">Related Assets</dt>
					<dd className="sidebar-dd">
						<ul className="list-group sidebar-list-group">
							<li
								className="list-group-item list-group-item-flex"
							>
								<div className="autofit-col">
									<div className="sticker sticker-secondary">
										<span className="inline-item">
											<svg
												className="lexicon-icon lexicon-icon-blogs"
												focusable="false"
												role="presentation"
											>
												<use
													href="/images/icons/icons.svg#blogs"
												></use>
											</svg>
										</span>
									</div>
								</div>
								<div className="autofit-col autofit-col-expand">
									<section className="autofit-section">
										<div
											className="list-group-title text-truncate-inline"
										>
											<a
												className="text-truncate"
												href="#1"
												>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</a
											>
										</div>
									</section>
								</div>
							</li>
						</ul>
					</dd>
				</dl>
				<div
					aria-orientation="vertical"
					className="panel-group panel-group-flush panel-group-sm"
					role="tablist"
				>
					<div className="panel panel-unstyled">
						<a
							aria-controls="collapseOne"
							aria-expanded="false"
							className="collapse-icon panel-header panel-header-link collapsed"
							data-toggle="collapse"
							href="#collapseOne"
							id="headingOne"
							role="tab"
						>
							<span className="panel-title"
								>Collapsible Group Item #1</span
							>
							<span className="collapse-icon-closed">
								<svg
									className="lexicon-icon lexicon-icon-angle-left"
									focusable="false"
									role="presentation"
								>
									<use
										href="/images/icons/icons.svg#angle-left"
									></use>
								</svg>
							</span>
							<span className="collapse-icon-open">
								<svg
									className="lexicon-icon lexicon-icon-angle-down"
									focusable="false"
									role="presentation"
								>
									<use
										href="/images/icons/icons.svg#angle-down"
									></use>
								</svg>
							</span>
						</a>
						<div
							aria-labelledby="headingOne"
							className="panel-collapse collapse"
							id="collapseOne"
							role="tabpanel"
						>
							<div className="panel-body">
								In organic dripper so, body, robust medium
								pumpkin spice cup, in aged dripper latte extra
								cup white.
							</div>
						</div>
					</div>
				</div>
			</div>
			<div
				aria-labelledby="sidebarLightVersionsTab"
				className="fade tab-pane"
				id="sidebarLightVersions"
				role="tabpanel"
			>
				<ul className="list-group sidebar-list-group">
					<li className="list-group-item list-group-item-flex">
						<div className="autofit-col autofit-col-expand">
							<div className="list-group-title">Version 1.2</div>
							<div className="list-group-subtitle">
								By Helen, on 8/31/17 9:15am
							</div>
							<div className="list-group-subtext">
								No Change Log
							</div>
						</div>
						<div className="autofit-col">
							<div className="dropdown dropdown-action">
								<a
									aria-expanded="false"
									aria-haspopup="true"
									className="component-action dropdown-toggle"
									data-toggle="dropdown"
									href="#1"
									id="sidebarLightListDropdownId01"
									role="button"
								>
									<svg
										className="lexicon-icon lexicon-icon-ellipsis-v"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#ellipsis-v"
										></use>
									</svg>
								</a>
								<ul
									aria-labelledby="sidebarLightListDropdownId01"
									className="dropdown-menu"
									x-placement="bottom-start"
									style={{position: 'absolute', willChange: transform; top: '0px', left: '0px', transform: 'translate3d(0px, 811px, 0px)'}}
									x-out-of-boundaries=""
								>
									<li>
										<a
											className="dropdown-item"
											href="#1"
											role="button"
											>Download</a
										>
									</li>
									<li>
										<a className="dropdown-item" href="#1"
											>Edit</a
										>
									</li>
								</ul>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Sidebar Dark

Just add sidebar-dark class on the same element that you are using sidebar.

Site Configuration
<div className="sidebar sidebar-dark">
	<div className="sidebar-header">
		<div className="autofit-row sidebar-section">
			<div className="autofit-col autofit-col-expand">
				<div className="component-title">
					<span className="text-truncate-inline">
						<a className="text-truncate" href="#1"
							>Site Configuration</a
						>
					</span>
				</div>
			</div>
			<div className="autofit-col">
				<button aria-label="Close" className="close" type="button">
					<svg
						className="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use xlinkHref="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
		</div>
	</div>
	<div className="sidebar-body">
		<ul className="nav nav-nested">
			<li className="nav-item">
				<a className="active nav-link" href="#1">Details</a>
			</li>
			<li className="nav-item">
				<a className="nav-link" href="#1">Categorization</a>
			</li>
			<li className="nav-item">
				<a className="disabled nav-link" href="#1" tabindex="-1"
					>Documents and Media</a
				>
			</li>
			<li className="nav-item">
				<a className="nav-link" href="#1">Site Template</a>
			</li>
			<li className="nav-item">
				<a className="nav-link" href="#1">Configuration</a>
			</li>
			<li className="nav-item">
				<a className="nav-link" href="#1">Identification</a>
			</li>
		</ul>
	</div>
</div>

Sidebar Dark L2

Just add sidebar-dark-l2 class on the same element that you are using sidebar.

Site Configuration
<div className="sidebar sidebar-dark-l2">
	<div className="sidebar-header">
		<div className="autofit-row sidebar-section">
			<div className="autofit-col autofit-col-expand">
				<div className="component-title">
					<span className="text-truncate-inline">
						<a className="text-truncate" href="#1"
							>Site Configuration</a
						>
					</span>
				</div>
			</div>
			<div className="autofit-col">
				<button aria-label="Close" className="close" type="button">
					<svg
						className="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use xlinkHref="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
		</div>
	</div>
	<div className="sidebar-body">
		<ul className="nav nav-nested">
			<li className="nav-item">
				<a className="active nav-link" href="#1">Details</a>
			</li>
			<li className="nav-item">
				<a className="nav-link" href="#1">Categorization</a>
			</li>
			<li className="nav-item">
				<a className="disabled nav-link" href="#1" tabindex="-1"
					>Documents and Media</a
				>
			</li>
			<li className="nav-item">
				<a className="nav-link" href="#1">Site Template</a>
			</li>
			<li className="nav-item">
				<a className="nav-link" href="#1">Configuration</a>
			</li>
			<li className="nav-item">
				<a className="nav-link" href="#1">Identification</a>
			</li>
		</ul>
	</div>
</div>
Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited January 29, 2025 at 1:35:05 AM

Table of Contents