Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit06036f9

Browse files
committed
Update page-layouts.mdx to correct installation guideline link and enhance layout code snippets
1 parent093aff1 commit06036f9

File tree

2 files changed

+195
-4
lines changed

2 files changed

+195
-4
lines changed

‎docs/ui/layout/navs-tabls.mdx‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
title:Navs and tabs
3+
summary:This guide covered the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs.
4+
description:"Essential guide to nav styles: tabs, pills, dropdowns, and more."
5+
---
6+
7+
Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
8+
9+
##Horizontal nav
10+
11+
If you want to create a horizontal navigation bar, you can use the`.nav` class. The`.nav-item` class is used to style each item within the navigation bar, and`.nav-link` is applied to the links. The`.active` class highlights the current active link, while the`.disabled` class styles non-clickable links.
12+
13+
```html
14+
<ulclass="nav">
15+
<liclass="nav-item">
16+
<aclass="nav-link active"aria-current="page"href="#">Active</a>
17+
</li>
18+
<liclass="nav-item">
19+
<aclass="nav-link"href="#">Link</a>
20+
</li>
21+
<liclass="nav-item">
22+
<aclass="nav-link disabled"aria-disabled="true">Disabled</a>
23+
</li>
24+
</ul>
25+
```
26+
27+
Look at the example below to see how the horizontal navigation bar is displayed.
28+
29+
```html example centered
30+
<ulclass="nav">
31+
<liclass="nav-item">
32+
<aclass="nav-link active"aria-current="page"href="#">Active</a>
33+
</li>
34+
<liclass="nav-item">
35+
<aclass="nav-link"href="#">Link</a>
36+
</li>
37+
<liclass="nav-item">
38+
<aclass="nav-link"href="#">Link</a>
39+
</li>
40+
<liclass="nav-item">
41+
<aclass="nav-link disabled"aria-disabled="true">Disabled</a>
42+
</li>
43+
</ul>
44+
```
45+
46+
##Vertical nav
47+
48+
To create a vertical navigation bar, add the`.flex-column` class to the`.nav` element. This arranges the navigation items in a column instead of a row, making it suitable for sidebars or vertical menus.
49+
50+
```html
51+
<ulclass="nav flex-column">
52+
...
53+
</ul>
54+
```
55+
56+
There is an example below to see how the vertical navigation bar is displayed.
57+
58+
```html example centered
59+
<ulclass="nav flex-column">
60+
<liclass="nav-item">
61+
<aclass="nav-link active"aria-current="page"href="#">Active</a>
62+
</li>
63+
<liclass="nav-item">
64+
<aclass="nav-link"href="#">Link</a>
65+
</li>
66+
<liclass="nav-item">
67+
<aclass="nav-link"href="#">Link</a>
68+
</li>
69+
<liclass="nav-item">
70+
<aclass="nav-link disabled"aria-disabled="true">Disabled</a>
71+
</li>
72+
</ul>
73+
```
74+
75+
##Tabs
76+
77+
To create a tabbed navigation interface, use the`.nav-tabs` class. This is ideal for displaying different content sections within a single interface, where each tab represents a section.
78+
79+
```html
80+
<ulclass="nav nav-tabs">
81+
...
82+
</ul>
83+
```
84+
85+
Example below shows how the tabbed navigation interface is displayed.
86+
87+
```html example centered
88+
<ulclass="nav nav-tabs">
89+
<liclass="nav-item">
90+
<aclass="nav-link active"aria-current="page"href="#">Active</a>
91+
</li>
92+
<liclass="nav-item">
93+
<aclass="nav-link"href="#">Link</a>
94+
</li>
95+
<liclass="nav-item">
96+
<aclass="nav-link"href="#">Link</a>
97+
</li>
98+
<liclass="nav-item">
99+
<aclass="nav-link disabled"aria-disabled="true">Disabled</a>
100+
</li>
101+
</ul>
102+
```
103+
104+
##Pills
105+
106+
For a pill-shaped navigation style, use the`.nav-pills` class. This is a great choice for a sleek, modern look, especially in interactive UI components.
107+
108+
```html example centered
109+
<ulclass="nav nav-pills">
110+
<liclass="nav-item">
111+
<aclass="nav-link active"aria-current="page"href="#">Active</a>
112+
</li>
113+
<liclass="nav-item">
114+
<aclass="nav-link"href="#">Link</a>
115+
</li>
116+
<liclass="nav-item">
117+
<aclass="nav-link"href="#">Link</a>
118+
</li>
119+
<liclass="nav-item">
120+
<aclass="nav-link disabled"aria-disabled="true">Disabled</a>
121+
</li>
122+
</ul>
123+
```
124+
125+
##Underline
126+
127+
To create a navigation bar with an underline effect for active links, use the`.nav-underline` class. This provides a clean and minimalistic style.
128+
129+
```html example centered
130+
<ulclass="nav nav-underline">
131+
<liclass="nav-item">
132+
<aclass="nav-link active"aria-current="page"href="#">Active</a>
133+
</li>
134+
<liclass="nav-item">
135+
<aclass="nav-link"href="#">Link</a>
136+
</li>
137+
<liclass="nav-item">
138+
<aclass="nav-link"href="#">Link</a>
139+
</li>
140+
<liclass="nav-item">
141+
<aclass="nav-link disabled"aria-disabled="true">Disabled</a>
142+
</li>
143+
</ul>
144+
```
145+
146+
##Tabs with Dropdown
147+
148+
You can enhance tabs by adding dropdown menus using the`.dropdown` class inside a`.nav-tabs` structure. This allows for additional options under a single tab, improving the navigation experience.
149+
150+
```html
151+
<ulclass="nav nav-tabs">
152+
...
153+
<liclass="nav-item dropdown">
154+
<aclass="nav-link dropdown-toggle"data-bs-toggle="dropdown"href="#"role="button"aria-expanded="false">Dropdown</a>
155+
<ulclass="dropdown-menu">
156+
...
157+
</ul>
158+
</li>
159+
...
160+
</ul>
161+
```
162+
163+
Example below shows how tabs with dropdown menus are displayed.
164+
165+
```html example centered height="15rem"
166+
<ulclass="nav nav-tabs">
167+
<liclass="nav-item">
168+
<aclass="nav-link active"aria-current="page"href="#">Active</a>
169+
</li>
170+
<liclass="nav-item dropdown">
171+
<aclass="nav-link dropdown-toggle"data-bs-toggle="dropdown"href="#"role="button"aria-expanded="false">Dropdown</a>
172+
<ulclass="dropdown-menu">
173+
<li><aclass="dropdown-item"href="#">Action</a></li>
174+
<li><aclass="dropdown-item"href="#">Another action</a></li>
175+
<li><aclass="dropdown-item"href="#">Something else here</a></li>
176+
<li><hrclass="dropdown-divider"></li>
177+
<li><aclass="dropdown-item"href="#">Separated link</a></li>
178+
</ul>
179+
</li>
180+
<liclass="nav-item">
181+
<aclass="nav-link"href="#">Link</a>
182+
</li>
183+
<liclass="nav-item">
184+
<aclass="nav-link disabled"aria-disabled="true">Disabled</a>
185+
</li>
186+
</ul>
187+
```

‎docs/ui/layout/page-layouts.mdx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ description: Learn to design dashboard layouts.
55
---
66

77
<Callout>
8-
Before you start with this section, make sure you have followed the[installation guideline](/docs/ui/getting-started/download).
8+
Before you start with this section, make sure you have followed the[installation guideline](/docs/ui/getting-started/installation).
99
</Callout>
1010

1111
##Sample layout
1212

13-
```html example fullpage resizable height="30rem"
13+
To create a sample version of the dashboard, you can use the following code snippet. This code snippet will help you to create a dashboard layout with a header.
14+
15+
```html example fullpage resizable height="30rem" background="surface"
1416
<divclass="page">
1517
<headerclass="navbar navbar-expand-sm navbar-light d-print-none">
1618
<divclass="container-xl">
@@ -65,10 +67,12 @@ description: Learn to design dashboard layouts.
6567

6668
##Sidebar layout
6769

68-
```html example fullpage resizable height="30rem"
70+
To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header.
71+
72+
```html example fullpage resizable height="30rem" background="surface"
6973
<divclass="page">
7074
<!-- Sidebar-->
71-
<asideclass="navbar navbar-vertical navbar-expand-sm navbar-dark">
75+
<asideclass="navbar navbar-vertical navbar-expand-sm"data-bs-theme="dark">
7276
<divclass="container-fluid">
7377
<buttonclass="navbar-toggler"type="button">
7478
<spanclass="navbar-toggler-icon"></span>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp