JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
	<li class="navigation-item"><a href="doc/news" class="navigation-link" data-action="navigation">Новости</a></li>
	<li class="navigation-item"><a href="doc/library" class="navigation-link" data-action="navigation">Библиотека</a></li>
	<li class="navigation-item"><a href="doc/contacts" class="navigation-link" data-action="navigation">Контакты</a></li>
	<li class="navigation-item"><a href="doc/" class="navigation-link" data-action="navigation">Отдых</a></li>
	<li class="navigation-item"><a href="doc/history" class="navigation-link" data-action="navigation">История</a></li>
	<li class="navigation-item"><a href="doc/cllagr" class="navigation-link" data-action="navigation">Коллективный договор</a></li>
	<li class="navigation-item"><a href="doc/safety" class="navigation-link" data-action="navigation">Безопасность труда</a></li>
	<li class="navigation-item"><a href="doc/photos" class="navigation-link" data-action="navigation">Фотогалерея</a></li>
</ul>

CSS

body {
	margin: 0;
}
.navigation {
	display: table;
	padding: 0;
	margin: 0;
	width: 100%;
}
.navigation-item {
	display: table-cell;
	border-bottom: 5px solid #8eb132;
	background: #f4f4ec;
}
.navigation-item + .navigation-item {
	border-left: 1px solid #e1e1d3; 
}
.navigation-link {
	display: block;
	padding: 10px 15px;
	font: bolder 12px/18px Tahoma, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-align: center;
	color: #44494f;
}
.navigation-link:hover {
	color: #75902d;
	background: #c42b2d;
}

JavaScript

$(document).on('click', '[data-action="navigation"]', function (e) {
	e.preventDefault();
	console.log($(this).attr('href'));
});