Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Youtube Header navigation using Semantic UI
import React from 'react';
import {Form, Icon, Image, Input, Menu} from 'semantic-ui-react';
import './HeaderNav.scss';
import logo from '../../assets/images/logo.jpg';
export class HeaderNav extends React.Component {
render() {
return (
<Menu borderless className='top-menu' fixed='top'>
<Menu.Item header className='logo'>
<Image src={logo} size='tiny'/>
<Menu.Menu className='nav-container'>
<Menu.Item className='search-input'>
<Input placeholder='Search'
<Menu.Menu position='right'>
<Icon className='header-icon' name='video camera' size='large'/>
<Icon className='header-icon' name='grid layout' size='large'/>
<Icon className='header-icon' name='chat' size='large'/>
<Icon className='header-icon' name='alarm' size='large'/>
<Menu.Item name='avatar'>
<Image src='' avatar/>
export default HeaderNav;
The is needed otherwise there's a more specific rule from semantic UI
we use this rule to tweak Semantic UI's CSS
*/ {
border: none;
.logo {
width: 17rem;
.nav-container {
flex-grow: 1;
padding: 0;
.search-input {
padding-left: 0;
width: 33%;
form {
width: 100%;
.header-icon {
color: #a0a0a0;
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.