Navigation Tabs

1
2  // FHNW - Navigation Tabs
3  <ul class="nav nav-tabs" id="myTab" role="tablist">
4  <li class="nav-item" role="presentation">
5    <button
6      class="nav-link active"
7      id="home-tab"
8      data-bs-toggle="tab"
9      data-bs-target="#home-tab-pane"
10      type="button"
11      role="tab"
12      aria-controls="home-tab-pane"
13      aria-selected="true"
14    >
15      Header I
16    </button>
17  </li>
18  <li class="nav-item" role="presentation">
19    <button
20      class="nav-link"
21      id="profile-tab"
22      data-bs-toggle="tab"
23      data-bs-target="#profile-tab-pane"
24      type="button"
25      role="tab"
26      aria-controls="profile-tab-pane"
27      aria-selected="false"
28    >
29      Header II
30    </button>
31  </li>
32  <li class="nav-item" role="presentation">
33    <button
34      class="nav-link"
35      id="contact-tab"
36      data-bs-toggle="tab"
37      data-bs-target="#contact-tab-pane"
38      type="button"
39      role="tab"
40      aria-controls="contact-tab-pane"
41      aria-selected="false"
42    >
43      Header III
44    </button>
45  </li>
46  <li class="nav-item" role="presentation">
47    <button
48      class="nav-link"
49      id="disabled-tab"
50      data-bs-toggle="tab"
51      data-bs-target="#disabled-tab-pane"
52      type="button"
53      role="tab"
54      aria-controls="disabled-tab-pane"
55      aria-selected="false"
56      disabled
57    >
58      Disabled
59    </button>
60  </li>
61</ul>
62<div class="tab-content" id="myTabContent">
63  <div
64    class="tab-pane fade show active"
65    id="home-tab-pane"
66    role="tabpanel"
67    aria-labelledby="home-tab"
68    tabIndex={0}
69  >
70    <h2>Tab-Content I</h2>
71    <p>
72      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum
73      perferendis necessitatibus doloremque tempore earum. Eos eum vel
74      culpa magni eveniet, numquam velit commodi! Facilis sint dolores,
75      quis accusamus minima incidunt maiores ab unde dicta placeat cum
76      recusandae veritatis odio nesciunt saepe facere, sed temporibus
77      labore natus, corrupti illo! Iure, doloremque officiis doloribus
78      eligendi ad amet molestias quas a ipsum beatae illo dolores quod
79      excepturi modi cupiditate eius. Repellat, eos. Nihil, iure
80      quibusdam. Sint id repudiandae nemo neque autem aspernatur tenetur,
81      similique repellat nihil sunt totam, labore exercitationem quia ut
82      sed! Non in ad quod sed culpa. Blanditiis nostrum culpa cumque!
83    </p>
84  </div>
85  <div
86    class="tab-pane fade"
87    id="profile-tab-pane"
88    role="tabpanel"
89    aria-labelledby="profile-tab"
90    tabIndex={0}
91  >
92    <h2>Tab-Content II</h2>
93    <p>
94      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum
95      perferendis necessitatibus doloremque tempore earum. Eos eum vel
96      culpa magni eveniet, numquam velit commodi! Facilis sint dolores,
97      quis accusamus minima incidunt maiores ab unde dicta placeat cum
98      recusandae veritatis odio nesciunt saepe facere, sed temporibus
99      labore natus, corrupti illo! Iure, doloremque officiis doloribus
100      eligendi ad amet molestias quas a ipsum beatae illo dolores quod
101      excepturi modi cupiditate eius. Repellat, eos. Nihil, iure
102      quibusdam. Sint id repudiandae nemo neque autem aspernatur tenetur,
103      similique repellat nihil sunt totam, labore exercitationem quia ut
104      sed! Non in ad quod sed culpa. Blanditiis nostrum culpa cumque!
105    </p>
106  </div>
107  <div
108    class="tab-pane fade"
109    id="contact-tab-pane"
110    role="tabpanel"
111    aria-labelledby="contact-tab"
112    tabIndex={0}
113  >
114    <h2>Tab-Content III</h2>
115    <p>
116      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum
117      perferendis necessitatibus doloremque tempore earum. Eos eum vel
118      culpa magni eveniet, numquam velit commodi! Facilis sint dolores,
119      quis accusamus minima incidunt maiores ab unde dicta placeat cum
120      recusandae veritatis odio nesciunt saepe facere, sed temporibus
121      labore natus, corrupti illo! Iure, doloremque officiis doloribus
122      eligendi ad amet molestias quas a ipsum beatae illo dolores quod
123      excepturi modi cupiditate eius. Repellat, eos. Nihil, iure
124      quibusdam. Sint id repudiandae nemo neque autem aspernatur tenetur,
125      similique repellat nihil sunt totam, labore exercitationem quia ut
126      sed! Non in ad quod sed culpa. Blanditiis nostrum culpa cumque!
127    </p>
128  </div>
129  <div
130    class="tab-pane fade"
131    id="disabled-tab-pane"
132    role="tabpanel"
133    aria-labelledby="disabled-tab"
134    tabIndex={0}
135  >
136    ...
137  </div>
138</div>
139