Skip to content

Instantly share code, notes, and snippets.

@farma11 farma11/navbar-sample.html
Last active Feb 12, 2018

Embed
What would you like to do?
Bootstrap4を用いたナビバー:右側に言語選択dropdownを追加バージョン
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Bland</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<!-- 切替ボタンのアイコン -->
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!-- 言語選択用Dropdown -->
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
<a class="dropdown-item" href="../jp/index.html">
<img src="../img/flags/jp.gif"> 日本語
</a>
<a class="dropdown-item active" href="../en/index.html">
<img src="../img/flags/gb.gif"> English
</a>
</div>
</li>
</ul>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.