{
    "componentChunkName": "component---src-templates-doc-template-js",
    "path": "/en/docs/nav",
    "result": {"data":{"current":{"fields":{"page":{"path":"/docs/nav","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Nav","markdown":"\nA simple horizontal navigation component prepared for use in the navigation bar.\n\n<div class=\"gra-doc-s-wrapper\">\n<nav>\n<ul class=\"gra-nav\">\n<li class=\"gra-nav-item\">\n\n[Home](/docs/nav/# 'NavLink')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[About](/docs/nav/# 'NavLink')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[Contact](/docs/nav/# 'NavLinkCurrent')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[Works](/docs/nav/# 'NavLink')\n\n</li>\n</ul>\n</nav>\n</div>\n\n```html\n<nav>\n  <ul class=\"gra-nav\">\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Home</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">About</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link current\" href=\"#\" aria-current=\"page\">Contact</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Works</a>\n    </li>\n  </ul>\n</nav>\n```\n\n## Full Width\n\nFor using full with you can use `.gra-nav-fill` with `.gra-nav` class.\n\n<div class=\"gra-doc-s-wrapper\">\n<nav>\n<ul class=\"gra-nav gra-nav-fill\">\n<li class=\"gra-nav-item\">\n\n[Home](/docs/nav/# 'NavLink')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[About](/docs/nav/# 'NavLink')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[Contact](/docs/nav/# 'NavLinkCurrent')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[Works](/docs/nav/# 'NavLink')\n\n</li>\n</ul>\n</nav>\n</div>\n\n```html\n<nav>\n  <ul class=\"gra-nav gra-nav-fill\">\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Home</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">About</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link current\" href=\"#\" aria-current=\"page\">Contact</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Works</a>\n    </li>\n  </ul>\n</nav>\n```","mdtype":"MDHTML","section":"nav"},{"lang":"tr","title":"Navigasyon","markdown":"\nNavigasyon barında kullanmak üzere hazırlanmış yatay navigasyon komponenti.\n\n<div class=\"gra-doc-s-wrapper\">\n<nav>\n<ul class=\"gra-nav\">\n<li class=\"gra-nav-item\">\n\n[Ana Sayfa](/docs/nav/# 'NavLink')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[Hakkımızda](/docs/nav/# 'NavLink')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[İletişim](/docs/nav/# 'NavLinkCurrent')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[Çalışmalar](/docs/nav/# 'NavLink')\n\n</li>\n</ul>\n</nav>\n</div>\n\n```html\n<nav>\n  <ul class=\"gra-nav\">\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Ana Sayfa</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Hakkımızda</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link current\" href=\"#\" aria-current=\"page\">İletişim</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Çalışmalar</a>\n    </li>\n  </ul>\n</nav>\n```\n\n## Tam Genişlik\n\nTam genişlik için `.gra-nav` classına ek olarak `.gra-nav-fill` kullanabilirsiniz.\n\n<div class=\"gra-doc-s-wrapper\">\n<nav>\n<ul class=\"gra-nav gra-nav-fill\">\n<li class=\"gra-nav-item\">\n\n[Ana Sayfa](/docs/nav/# 'NavLink')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[Hakkımızda](/docs/nav/# 'NavLink')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[İletişim](/docs/nav/# 'NavLinkCurrent')\n\n</li>\n<li class=\"gra-nav-item\">\n\n[Çalışmalar](/docs/nav/# 'NavLink')\n\n</li>\n</ul>\n</nav>\n</div>\n\n```html\n<nav>\n  <ul class=\"gra-nav gra-nav-fill\">\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Ana Sayfa</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Hakkımızda</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link current\" href=\"#\" aria-current=\"page\">İletişim</a>\n    </li>\n    <li class=\"gra-nav-item\">\n      <a class=\"gra-nav-link\" href=\"#\">Çalışmalar</a>\n    </li>\n  </ul>\n</nav>\n```","mdtype":"MDHTML","section":"nav"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/nav/en.md","language":"en","intl":{"language":"en","languages":["en","tr"],"messages":{"404.pagenotfound":"Page Not Found","404.emptyroute":"Oops! The page you are looking for has been changed or removed.","404.gotodocs":"Go To Docs","404.gotohome":"Go To Home","title":"Gralig CSS","description":"A modest, grayish CSS Library","summary":"Gralig is a modest, grayish CSS library. It can be starting point for your CSS development.","author":"@erenesto","keywords":"css, css library, clean css, grayish, frontend, ui, modest, pure, clean design, lightweight css","pages.404":"Error 404","pages.index":"Gralig CSS","pages.docs":"Gralig Documentation","sidenavLinks.docs.name":"Introduction","sidenavLinks.colors.name":"Colors","sidenavLinks.grid.name":"Grid","sidenavLinks.dark.name":"Dark Mode","sidenavLinks.vars.name":"Variables","sidenavLinks.responsive.name":"Responsive","sidenavLinks.utils.name":"Utils","sidenavLinks.typography.name":"Typography","sidenavLinks.button.name":"Button","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Custom Inputs","sidenavLinks.checkbox.name":"Checkbox","sidenavLinks.radio.name":"Radio","sidenavLinks.switch.name":"Switch","sidenavLinks.nav.name":"Nav","sidenavLinks.navbar.name":"Navbar","sidenavLinks.footer.name":"Footer","sidenavLinks.breadcrumb.name":"Breadcrumb","sidenavLinks.card.name":"Card","sidenavLinks.alert.name":"Alert","sidenavLinks.list.name":"List","sidenavLinks.table.name":"Table","sidenavLinks.dropdown.name":"Dropdown","sidenavLinks.progress.name":"Progress","sidenavLinks.loading.name":"Loading","sidenavLinks.modal.name":"Modal","words.copy":"Copy","words.copied":"Copied!","words.docs":"Docs","words.builtwith":"Built with"},"routed":true,"originalPath":"/docs/nav","redirect":false,"defaultLanguage":"en"}}},
    "staticQueryHashes": ["63159454"]}