導航欄豎杠是許多網站和應用程序中常見的一種設計元素。在創建導航欄時，我們可以通過使用CSS代碼實現這個效果。下面是一個基本的CSS代碼示例，可以用于添加豎杠到導航欄中：

.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
height: 60px;
padding: 0 20px;
}
.nav-item {
position: relative;
}
.nav-item:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 1px;
background-color: #ccc;
}

上面的代碼包括兩個部分，分別是.nav-bar和.nav-item。.nav-bar定義了導航欄的基本樣式，包括其背景顏色、高度和內邊距。同時，它使用了Flexbox布局模型來調整導航欄中的元素位置。

.nav-item是導航欄中每個單獨的鏈接元素。在這里，我們使用了偽元素:before來創建導航欄豎杠。偽元素是通過CSS選擇器而動態生成的元素。在這種情況下，我們使用:before來添加一個位置位于.nav-item元素的左側的豎杠。注意，我們通過調整偽元素的left屬性來對豎杠的位置進行微調。

使用上述CSS代碼，您可以為您的導航欄添加豎杠。您可以進一步自定義這些元素的樣式，例如更改其寬度、顏色或高度。這個簡單的CSS代碼示例可以為您提供一個起點，以創建自己的獨特導航欄設計。