Skip to content

Instantly share code, notes, and snippets.

Embed
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.Item>
<Menu.Menu className='nav-container'>
<Menu.Item className='search-input'>
<Form>
<Form.Field>
<Input placeholder='Search'
size='small'
action='Go'
/>
</Form.Field>
</Form>
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item>
<Icon className='header-icon' name='video camera' size='large'/>
</Menu.Item>
<Menu.Item>
<Icon className='header-icon' name='grid layout' size='large'/>
</Menu.Item>
<Menu.Item>
<Icon className='header-icon' name='chat' size='large'/>
</Menu.Item>
<Menu.Item>
<Icon className='header-icon' name='alarm' size='large'/>
</Menu.Item>
<Menu.Item name='avatar'>
<Image src='http://via.placeholder.com/80x80' avatar/>
</Menu.Item>
</Menu.Menu>
</Menu.Menu>
</Menu>
);
}
}
export default HeaderNav;
/*
The .ui.menu is needed otherwise there's a more specific rule from semantic UI
we use this rule to tweak Semantic UI's CSS
*/
.ui.menu.top-menu {
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.