blob: f3d7268250b2a8f1896b15516b4155de333b13a3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'navbar'
- var parent = 'layout'
- var title = 'Navbar - Layout - Spectre.css CSS Framework'
- var description = 'Navbar is a layout container that appears in the header of apps and websites. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('navbar', 'Navbar')
include ../_layout/_ad-g.pug
p Navbar is a layout container that appears in the header of apps and websites.
.docs-demo.columns
.column
.navbar
.navbar-section
a.navbar-brand.text-bold.mr-2(href="#navbar") SPECTRE.CSS
a.btn.btn-link(href="#navbar") Docs
a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
.navbar-section
.input-group.input-inline
input.form-input(type="text" placeholder="search")
button.btn.btn-primary.input-group-btn Search
p
| The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements.
| Each section with the #[code navbar-section] class will be evenly distributed in the container.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<header class="navbar">
<section class="navbar-section">
<a href="..." class="navbar-brand mr-2">Spectre.css</a>
<a href="..." class="btn btn-link">Docs</a>
<a href="..." class="btn btn-link">GitHub</a>
</section>
<section class="navbar-section">
<div class="input-group input-inline">
<input class="form-input" type="text" placeholder="search">
<button class="btn btn-primary input-group-btn">Search</button>
</div>
</section>
</header>
p
| You can use #[code navbar-center] class to have a centered section.
.docs-demo.columns
.column.col-12
.navbar
.navbar-section
a.btn.btn-link(href="#navbar") Docs
a.btn.btn-link(href="#navbar") Examples
.navbar-center
img(src="../img/spectre-logo.svg" alt="Spectre.css")
.navbar-section
a.btn.btn-link(href="https://twitter.com/spectrecss") Twitter
a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<header class="navbar">
<section class="navbar-section">
<a href="#" class="btn btn-link">Docs</a>
<a href="#" class="btn btn-link">Examples</a>
</section>
<section class="navbar-center">
<!-- centered logo or brand -->
</section>
<section class="navbar-section">
<a href="#" class="btn btn-link">Twitter</a>
<a href="#" class="btn btn-link">GitHub</a>
</section>
</header>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
