Tools-Header
Der Tools-Header stellt einen Header mit integrierter Navigation für FHNW-interne Plattformen zur Verfügung.
- Einfacher Dropdown (vgl. obiger Navigationspunkt "Corporate Design")
- Mega-Menu (vgl. obige Navigationspunkte “Basiselemente” und “Komponenten”)
Der hier dargestellte Tools-Header integriert ausserdem Login- und Sprachumschalt-Funktionalität. Entsprechende UI-Elemente sind hier beispielhaft dargestellt.
Tools-Header mit allen Optionen und Varianten
1
2 // FHNW - Tools Header
3 <nav
4 className="navbar navbar-expand-lg navbar-light"
5 role="navigation"
6 >
7 <a className="navbar-brand">
8 <img
9 src=""
10 alt="FHNW - Fachhochschule Nordwestschweiz"
11 height=""
12 width=""
13 />
14 </a>
15
16 <button
17 className="navbar-toggler"
18 type="button"
19 data-bs-toggle="collapse"
20 data-bs-target="navbarId"
21 aria-controls=""
22 aria-expanded="false"
23 aria-label="Toggle navigation"
24 >
25 <span className="navbar-toggler-icon"></span> Menü
26 </button>
27
28 {/* MAIN NAVIGATION */}
29 <div className="collapse navbar-collapse" id="navbarId">
30 <ul className="navbar-nav mr-auto mt-2 mt-md-0">
31 <li className="nav-item">
32 <a className="nav-link" aria-current="page">
33 Home
34 </a>
35 </li>
36 <li className="nav-item dropdown">
37 <a
38 className="nav-link dropdown-toggle"
39 href="#"
40 id="navbarCorporate"
41 role="button"
42 data-bs-toggle="dropdown"
43 aria-expanded="false"
44 >
45 Single Dropdown
46 </a>
47
48 <ul className="dropdown-menu" aria-labelledby="navbarCorporate">
49 <li>
50 <a className="dropdown-item" title="Webdienste">
51 Subitem I
52 </a>
53 </li>
54 <li>
55 <a className="dropdown-item" title="Tools und Services">
56 Subitem II
57 </a>
58 </li>
59 <li>
60 <hr className="dropdown-divider" />
61 </li>
62 </ul>
63 </li>
64 <li className="nav-item dropdown has-megamenu">
65 <a
66 className="nav-link dropdown-toggle"
67 href="#"
68 data-bs-toggle="dropdown"
69 >
70 Megamenu
71 </a>
72 <div className="dropdown-menu megamenu" role="menu">
73 <MegaMenuDemo title="Metatitle" />
74 </div>
75 </li>
76 <li>
77 <a className="nav-link ">Topic II</a>
78 </li>
79 </ul>
80 </div>
81
82 {/* LANGUAGE MENU */}
83 <div className="collapse navbar-collapse d-flex justify-content-end d-none">
84 <div className="language-menu border-primary border-end px-4">
85 <ul className="navbar-nav mr-auto mt-2 mt-md-0 gap-2">
86 <li className="nav-item">
87 <a
88 href=""
89 className="btn btn-outline-secondary btn-sm bg-primary text-white px-2"
90 aria-current="page"
91 data-bs-toggle="tooltip"
92 data-bs-placement="bottom"
93 title="Demonstration purposes only"
94 >
95 DE
96 </a>
97 </li>
98 <li className="nav-item">
99 <a
100 href=""
101 className="btn btn-outline-secondary bg-transparent btn-sm px-2"
102 aria-current="page"
103 data-bs-toggle="tooltip"
104 data-bs-placement="bottom"
105 title="Demonstration purposes only"
106 >
107 EN
108 </a>
109 </li>
110 </ul>
111 </div>
112
113 {/* USER DROPDOWN */}
114 <ul className="navbar-nav mr-auto mt-2 mt-md-0 px-3">
115 <li className="nav-item dropdown">
116 <a
117 href="#"
118 className="nav-link dropdown-toggle d-flex align-items-center"
119 id="navbarDropdown3"
120 role="button"
121 data-bs-toggle="dropdown"
122 aria-expanded="false"
123 >
124 <img
125 src=""
126 className="rounded-circle"
127 height="22"
128 alt="Avatar"
129 loading="lazy"
130 />
131 </a>
132 <ul
133 className="dropdown-menu dropdown-menu-end"
134 aria-labelledby="navbarDropdown3"
135 >
136 <li>
137
138
139 <a
140 href=""
141 target="_blank"
142 className="dropdown-item"
143 title=""
144 >
145 My Profile
146 </a>
147 </li>
148 <li>
149 <a
150 href=""
151 target="_blank"
152 className="dropdown-item"
153 title="Bootstrap v3"
154 >
155 Settings
156 </a>
157 </li>
158 <li>
159 <a
160 href=""
161 target="_blank"
162 className="dropdown-item"
163 title="Bootstrap v3"
164 >
165 Logout
166 </a>
167 </li>
168 </ul>
169 </li>
170 </ul>
171 </div>
172 </nav>
173 Tools-Header mit Projekttitel
Dieses Beispiel dient für Projekte die keine Navigationseinheiten benötigen und der Projekttitel hervorgehoben werden soll.
Hinweis: Sofern keine weiteren Navigationelemente enthalten sind muss für den Container NAV explizit eine Höhe von 60px gesetzt werden.
1
2 // Tools-Header with project title
3 <nav
4 class="navbar navbar-expand-lg navbar-light"
5 role="navigation" style="min-height: 60px"
6 >
7 <a href="" class="navbar-brand">
8 <img
9 src=""
10 alt="FHNW - Fachhochschule Nordwestschweiz"
11 height=""
12 width=""
13 />
14 <span class="navbar-title">Projekttitel</span>
15 </a>
16 <span class="navbar-title d-sm-none">Projekttitel</span>
17 </nav>
18