From 41f1283e9d393393c651b8ac5a28cae09733f1fd Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Fri, 9 Dec 2022 11:47:10 +0100
Subject: [PATCH] Add navigational page block

---
 .../src/assets/PageBlocks/Navigation.png      | Bin 0 -> 12012 bytes
 .../compose/src/assets/PageBlocks/index.js    |   1 +
 .../Admin/Page/Builder/Selector.vue           |   5 +
 .../components/PageBlocks/Navigation/Base.vue | 158 ++++++++++
 .../PageBlocks/Navigation/Configurator.vue    | 274 ++++++++++++++++++
 .../Navigation/NavTypes/ComposePage.vue       | 115 ++++++++
 .../Navigation/NavTypes/Dropdown.vue          | 148 ++++++++++
 .../PageBlocks/Navigation/NavTypes/Text.vue   |  21 ++
 .../PageBlocks/Navigation/NavTypes/Url.vue    |  47 +++
 .../PageBlocks/Navigation/NavTypes/base.vue   |  25 ++
 .../src/components/PageBlocks/base.vue        |   1 -
 .../src/components/PageBlocks/index.js        |   4 +
 lib/js/src/compose/types/page-block/index.ts  |   2 +-
 .../types/page-block/navigation/index.ts      |  51 ++++
 .../page-block/navigation/navigation-item.ts  |  72 +++++
 locale/en/corteza-webapp-compose/block.yaml   |  50 ++++
 16 files changed, 972 insertions(+), 2 deletions(-)
 create mode 100644 client/web/compose/src/assets/PageBlocks/Navigation.png
 create mode 100644 client/web/compose/src/components/PageBlocks/Navigation/Base.vue
 create mode 100644 client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
 create mode 100644 client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
 create mode 100644 client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
 create mode 100644 client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Text.vue
 create mode 100644 client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Url.vue
 create mode 100644 client/web/compose/src/components/PageBlocks/Navigation/NavTypes/base.vue
 create mode 100644 lib/js/src/compose/types/page-block/navigation/index.ts
 create mode 100644 lib/js/src/compose/types/page-block/navigation/navigation-item.ts

diff --git a/client/web/compose/src/assets/PageBlocks/Navigation.png b/client/web/compose/src/assets/PageBlocks/Navigation.png
new file mode 100644
index 0000000000000000000000000000000000000000..57ec0c2409e9c7df32d4bee3afd0704e40853b8d
GIT binary patch
literal 12012
zcmdVAby!qg6fRClDj@=b#3&#lFoT42Nw<K4beA+k4>4e%qSBqx-3<dMB0V%CjnWJy
z3|;r2ejnfOcmKTiKF_^8&&(XoIcvw-d#`uB@7`}8tI1y@rX$9}!n&rYAft(eg|iG?
ze<H*OzM~_Q7_hLgjcui+A1g{rgC4s&S=riKVqx72cL)<xZZ)~_O1)Aum-fax()(_d
zSxSns0-xkguwFgp&?C65+B{s@lu6-2Nq>TyelB@}JDByNKrQI86ur#Xkx%`y%A&R-
z)vK?%{RESa7Z<S@%E2#Ju*141wB7vgmNL!|dKurA4kC-Z+5aKvjm`LVu7i~Ir(8qb
z^|zoi+fIy#Ht<LnRM(sDxFq=OXre1th3YDjtlEsQ8$Xj=ccSK1cd$isTSf;P*qYAw
zhim%hta>);r=2zPjLZdWo$B)@>9T#5&d5pLCP(LzSgpemDx~-xh&t^y-11)BqXa&A
z%NW|zW?qdMjWUuz+-Kh(;p={%40%k!9exLLhYWX)FoNpk_jifAn^zO{wr>)KZfiAV
zSD)fUA>q@B*$*3AXX5dTe?F?gq*`R<=Y)}RT-yNS80LJ`(#36LmRz59nGX4=B|;#~
zRI7iA7cOF6uGZOn3V2-G@|mKQsw&of;F=H%JJ=Qr54gexK6Jnb3kx^mH5LKzdmZ@5
zq~ZMY6lXaN_n&L5PZuvrX-O+80>4`3u9lXLP#Y(=I@tMFpr}#XC(qoTsj3K@J2`+&
zEu73O!Cnr|7baMuUc$hogQc4($jiar5i0B@cIWpS!oc;#ZO9$a?^oRH#O^#(eGHOz
za<v3K1apJA?}!tFKp;_93oBtw8M(jaz<*+QY~0+Og&`16PfxHXFWAY|8uCC$NC?8s
z1L5J}0^Z<)dONzAdT}{Ing0~>PdPG{P;*yXXE$3XN6<yNre;p=Zen-tTvYV$-=B6`
zdf8sq<Ou!SEue#tizko=U~b62Wdo+77k7mp+j?2r>&n<V0PX?m5P$ISf#~n||EDLH
zHU7u)*`=ibAK!m1|MTSkZ}}8z=_>8y095HFemOFKjsN@buc0X9qUZnd#2+{Rz6<zS
zoLCg{@0f`b3wOu>1IdA>C?oa63wwQv!0X1yc*`$=%y2xsEDl1vu=E@3cZ^7Ilr(&v
z*2Ax8KonxHx8PTIBkp;yzXQn%rw_`kuzsRh34%*z;y)U5nr;=ad&qJ-(4t}?AjP^u
z3)z!&*o$18s@UwoH>h>~OhMx*1vYNt^mzM*Ft)#+92RAbM=ptl{r9WGB#?yW=fc_;
z^g1~c(`M<rBoP{G2Oi0C>(H>4mX@p2q6PB*zAT9q_!Vc|))B`o*=3=NiingnoKqL)
zI?9~>pW-eGo@61<L@en&di00|1fQK$-LS{Md>qJfrQ8Ny%+7_kq<F+larpqdh8WM*
zL=9P|-#c~_htNQNHnEOmeyS{z)n}p@J#69OL;U34Qx%_TCvXvZM5S+}9DLD*Kt5tT
zgL=14DR_z;e?Bu@@->l-^K|x%K5ezXwy$4c$;_&Jn7`lM=O8#14(;8rw)?czuG;Uh
za0oM>O2Uxr@f<A=It&7;KLU5~o_RXCgasf;u(9z(WkG2t=Gt1tMvWWn4%^KhcyE{&
z+0G{%_HF`g-Xh1Y?-QGs?7#XSUp|3jC8Mx$2rp{-{l&;43Ez++c#-|@9YT;K9BKC-
ze`1qe2TAUyy^zxS&zOKDm-zoF11JbiKt!Gf>;Ig_epxgjdD;%0B<Ka+-r5+mevKo-
zYMnG#x+@j}kq##1-zhZSi4LKG2&0pQpmHg`+lpi5mLX6*C0yI0)WP~jKckWItSn@6
zeq6iZD-xgMjkrC6XA*Zkm1SyC8zBwI7nyMFVgp-bR_3DRV&&=aes{IQM9<v*OaP4^
zS*fy5v&46_YWGfWQw}i0qzY%ADR$q@3&Fy9i$~Z`8OZ&vrI*-uyOT{b_wntw@83u9
zSavBi`5tCk_oW~Mz8tlhRN0|oU>kMq_Rm}3*xO$z)dd9#J|86sLFYG{&pp(XZ9zr5
zT6(cHefkH74Lq9}H5MDePF;KP<}7=t6&_3*sS!fI#NA&>4V=hMmkZN!+4l~M>Mb*G
z@2QI#ZtO`Kt#vVHH>|IGlBX%F6m{?R=g*&coM$B|hqL#OTR*HV^)}`tiF#|6TlL=W
zj)gRbt5#gaAv|e@dm`qb-^sU}12r<_I(PacAarg_;=bSU#)Q`q`_sHbYl}4w6WaOO
zMfZbA86sW~kadMK%UiU)qbhfr5pQ_cU9l(U@V!)un)4YbM=hC$tSGfMb``TSl&z+s
z(!;-FpuOD6EOAn;SN_CH<=v<QbE5wYM~S=R`XH_$=HtoWe!O;etYJBx!l`_Ir{8{5
z1W)*@EUmfv>-2O#)3r7~<!jD0!C3FHeD7&yc5)oB)qqq+!j!2zM@LMP_q?jQMj<MA
zf;nh7KB`{j9I3ASGvze9iZMdTawEdkQ?@H@X<X@5L|alfb%$S~ZKB%pU}iC2-eDRv
zg^et8-@DZB*dw0bF2=?Q`lZ})N_YSyYC4c&yI!SkaCWkz9xvdOvNqKq@T*XTHsE-@
zMz#-CTPsK_=2O{tc7$FOle`r<z8^e~+;2WRQXVZa-Yho;#+x6l{$0OBY^pnki}E!4
z$M!-uc$e~{O@H#isp3q{Fm!)oim0G#b)=xz%gqhLKLO3_AOw~sr^)GynkJ155FD6F
z&(6PM_E#8E{f}1o3yxNDQt8EfFwW1Ug5q_`%w&Ui$;N+;S*Hq>TXtK;RQOCXNWZ@7
zk|gNz<^B2Igj4ngQ^3iOe((B?perN^OO8|Z@k?{<p(5!0)sb$M?nHqS?@>!qdO>GZ
zeNn%lsDgzsSAM5umxmjT=F=qwN!{AdcZ0^JVrLjFvsXm9_KuC#@`gwat$G*NKMF%I
z{5$D#q3+-S<*K9X4OB&d$Bn$9@g52H#X|3D)C2PYr;nS95RZ833cpzC`vy~?Fn!Ub
zTJnH_p3r8mUGMc62IOJ=DeuxxgBS_lwU^BMt*Z3BFj9AeCf{8#y;w17JH)r^V={hx
zqnwEcp=x9WM_>7ODIuvCucEI7%DY}ZsRU$Vm@sd#i6zBUala&oft??~wDtUmhL4D>
z_wPt|uZ>momIDjeQ%GPHRkB$cq@~5id-i>)8Q~xnx_go$1kH}O=u=-gy`8n=cXIG+
z(XY*@SzMpVs^?*0%eabBqgNR%YCXS5JX<B+Y?0NMtXy1D5OZ_+xU1N(;e8?<o3F&+
zp>}(q?x=ss;E}MsyLjBni4;~~B~kwiM@08yas@K%b<@GYbXk%e`{Z|bi)3Mi`8p-w
z)?l(&QSa?I@4ZxHvPgFbr0HI$*k0VT^An5yG^st#r3!xr$I~4?v2E=Z2cN<A_q20K
zPGmNaq`f3Nr^dZ$G>>WmUzzps6tp<0rUN}C{Eji02uhPMZP%;LByr5vsrk#LQ*W1O
z47U8{rS&!bhvPerSJt)-D%g^>$LEUJ3H;>!H<Du7R<G3rId<+z;_8-Lz2M6|gY)J8
zf_T@OdlKavpzM`lt*QB^xw=*>apxU}2VU$Gl@%|a<TEqie++w<rQET61`$EgQp7w>
zKnQ=uoOr^}0TB>X(e}#h2G3zTD~}iErWT}9Nv!j<qpF>Eb<Tyy0wcIo?<U#q?qe|N
z9lNq|Q*m==_T+G9Q9t|p_h+;Z%w7tGR?3TUS$0OSnq5g=oa~?eDH}rFIs5s=Q29Hz
zk_PCKT3L`qytrSz=uQu>ncw%Y1b(}Ed$z3o;6$OBP)4!m(~*T_Jn6*=YS!)`1t3lt
zG==v=bF^~QvIUHK3*i&Bx(uX?ehM?87{s?D`0c3%PXPy%6Mv;j;zJ-V>IT-+E|CFC
zP!*0P=3q1|2hznxfS#PwE_8&q4ww0qsW|2>#*UK}pg6`BA`?Ct&!Ba_Z8q+F?6gD)
zTXx5|8<`|H$D6jkR;+Vf=wa!Fp(^PNwVOBgax{+vyIftSe1)nl5){o3eUN>wYnzej
zc`VxMRh2M@+77B<1Hk~P{K}QZM>}o%J1ou7+GaWNZuU>)tJkL40_YFhosYiEu=pH<
zg{+Iv3qLY?whJCQ#Acx%c2S{QpP>Zg5^UX>3e5&}`3^?CJ!v@ZaM|g^?f}^hW(*3{
zejn+;BzO|5a_XH&d+z-6Dz7m*r<&#J;QFj+Rd=>00wYewC)s$qH^F-Eo<a(2LuhF7
z>&h+EL@*HKyNYV2pXX0`&iLKES>;nuQuFLJGL_FZ;?VhQP#Mzso|ZRLITn1KG36*E
z&}q@PMnY!gSOb|P#LCUxKi^WKSJgEiIw3M$Vl1J-b_&lx4cWwtcoq*A==8aXFT3>f
zA%xvm<8H9Pgi<IZXBV#oIr>u-0$IqDG}nc$bTO^*j3|i!|Di}n<CDB0OnSd&mQogx
zGAy_92AAHjW!={~;fiNvW?*;Bqo-Ux?Qgz{?SrZO>@6lzaJNTkX1dsW>!wPdexwiO
zhk3zL47PRF6k`#H8vz=H7|Nx}&rG4QIurb{rrLeS<OKx6n+`&4N}(=DR3NLJdD7f1
zkF|$l7><W0(Dvj=Yh(gQRKA)pQolGFE#{R<6{cUeLZlQ%bz{tOrx>x9<}L1pseNhb
z-uuckFYN0Z{FS4QwTS7ZKz~qGH&@N1nNI@${y6w;N$Z=MrXmG{>#2}eBs32_6$cs3
zPG7U|zB9@(%R<Mg+L;uhGM8Uv^d<_ZKZR-v&qV4;eVK$JMrE5#D`uE0oBXi`*X;(3
z+_?a^Q>|OpXgc=P`m9uOAN5b}zGP)#`MTivglOpjkm%Xcq!Ea%TX6<TM&QuJ*&NQk
zAnU1^?gZ%+8!SHX-nQT^0?>X@s48F$KE3g)JXTq>c&I4J9aimK4H+$mH5phPZFMwB
zgvRm3(1yeay?{<l^)~D&e)g?11mk?*d?xv*C`4jC9r3fdc*Y`V1=S#C?lZ~OYi!@A
zwo{SaYeUOx-h`)9xbA!P=5BPwzF05E?$#BapP~wmvHbm`ph2+DK*rwQU2wu^M5&E)
zo~?B}RT7(h2&r93Q%cU;iTGNhFTbLY`#4vK-%Q_sV0ynF(tPsMz(4}C?28B+0w-jf
zE$k#Ry1){$i<Yl63mb;`<Ruz?%}*xSlZK78f4F7c#9kS@K#Ps%s0L@mB<`5o;w9mH
z`t&KiE<QoM_<W6z#&GjJx9JzW!y|M_Z!%p(SNrfpq2Ixe;Bt?3y~w#0gHQbA)YMk4
zk_{f~&zsIhk8}D`C1&P-+%3#$O_(bdGxH&lKW#t$LIR1ibZ5AMelc{wu352)D2IO2
z8JtTVh~R}iJXGH-M)hMVwtE8@L<aFzGMW?JdrvA=`jhq;j?coXcZ*P8JGIi8=<r1+
zz7;muhUPvgdR`SRp0SX;VfeNF*+?cT^Z93${3wbgDc6SdCA}w4qKN1?p5%gz{dS{?
zL@80I$yLBHno2R8?4z&3w%cfo-(;s*S`CO~EGIwadptUkzq-k2Gp_VAV)9s8X{q7#
zwjyl#cyFC!^wr|sfElA2e^4#DxM4n8$A|*`#Vs-+XN7aTV!Fu>mSb9B)!X9$;y=9$
z+glqfw^ZIqF`KcJ(=x0SFce`d44GRPkZ0oG#rUah)@RJHJfE)5@g*<cPqoHtl!7z5
zISDFN4%p#6AIZ1$!C*KJvQ-lk3{-ou&(DrGd)H|wH{KZ8=Vk#RbCD_WOlu@WW<9`a
z&lhpCP&M&ky435liZdXOQ3aWmbQhO=ev2FuW)Sh<>s~HD(+0Ec;IczwilYKT4-~d1
z6ST6Mm{?P<`Hy6_Bncj>*T2*|rACa+7ot&zxDqE_ot|wjyTLkz4f%pOS$rl_pzfZg
zoWqLpwp9dbm=<ADsdvb;z43k1Vm!z=IfM;mRm2@IMh9(BF!Wy#U=oh~H6Qq1kSt={
z_}YDbc|)e?`%ihWOZK+zf=8zwt4!B1tUWI&P0@<io%TU<MHXkwM0{Wn8O1zdYs{Sx
zKaYe3D6IIR&?cC~mmh8kC{;ZlQ7LYq8<T}j(SQwX1`VDM=b8>~-nnzf;^)`5*))^>
z>H`m#3H;n0NAjajwpz))scyPlxGZtD!E<wZG2td6?P&-&<2ZYr!>F-V@vx$%n-{<>
zBaoyMl~wBdJmdEXgdk@z?A{L}jBW@?KCyR;VXHa^N1=RK>0++qcEvRQ-sVL2&f`Yb
z3O+l?RT*zu`fq)AftD@vPn2$$`ui^!yd5i3&ad`Byul>Y+s2y|)wDR&bfvbdWm@K`
z<lh2)j7uG~oLKQ=WEr_9CV**oFWz?u-_x6*abc@sbV~9->==rWRPKw^rEjw9VG=_t
zsf{rz1=zb39rv&`4S1Adc8?J7J(e+q$x7fS8kdzhA6dv*dM2my)^eEzN2AG<mB!AX
z@$pP-=V;w0TJ6w!PrN08O3zMk)bx^+<}Ic5x*v9*>+}pZebw0oQ43Bi+^B`hgY=~l
zu{j7%JVf%H@*)$i9>63SS^68yl?N(gQ*{gwsTBnLAO29%gSRca4Ra@WK~pjSCw(#-
z*;!%P8^d7ohp&d&;>@R6(}~@Z!wSsAn+$)EGVBo_^B8pM+D};=ZTg#i4-<v`j1Xpf
ze*2QI&QfFJxYcl1Q2d7)YqCkgQ~p<9Qz(*rrP-#bAMHcS0+4plGi`u!5@u=wiAwb2
zC(>Bh`-B+#nMtu*W*nWw&Q~L{Oz{C84m8I<w}Y$49uFH&lcT@hNL6e1uc|N%mP5Fa
z_oqOwA=k~rNDC~eeiLi~PzxE=6c$~`e`tG{22N(JMHDAm_L98M;^Qf})M4{cOSS0Z
zfeq_f0L~Y2aNy-+%d_4i6PT6;>P!)9c=`IZl^Mr(zTc7nJGc>_d`lw`;O1Rtr^l?;
z$fWDk)QcIgPRFbqNdto<dI^66$L3Q&ta%d#hr=-jV(3Q~H7aCbi7n^7OsB({zDs`V
zmR-<}L7l6&{*bNHU80x4!HHy0`A|mwzQDl1_~GjhFZ^;)gC(?l=65m%W1{Y#etfO=
z9$}`eq%m)%OqT5XdZ43{M<nEFInC^LGA-tK3J$;Gq<^?ya}lIBLRryW=pzU3u(0b(
z=oR;H{}pLk*Z_j>_mjJv@=}Rtx&w$D9P$yTmzvTR5ikQ%1>djX{VRsRO8~{<xGUU3
z;!@}EeFVpvVk2c13H+;<0E5MWgSXt|$}&cFIeAja0fppkYlqt9aQts+T0EQc;kM;i
zy+b0skSm`Soy*>&(8~9`khRG}ShjuYhdaNgbl5b|q7|;LBl0cEKp@xXOw0YGS^bDL
zPphP9QfJ+G@vxy&Yx2JH%1>F{TAQ*YVZW}T2}|=o{;`OXd@NTKw|fT;-y}9D_vtlW
zIm_oXF4GjJ+cmB$QKAxZUyV{ZaxBNJ4yn5?A-VV&i#G5CJ;7>bW@ap+cMLYbT5>@_
z1~Wcxet^gmJ(Q!aeCWEsa_7#Mx<XQ52FO-#e!pE-R;F2Ougj|r>jBh^CCxs@fg>P9
zhD(q#Mgi$#mjjTx_WcABfD6}$(m0<&R(|zn1p?kC!U1@B>=<;hOMPdl%aBzm?(VDL
z;7$&RXCzR#V$bVqny2BxtjaN*JT8NtgE=#HcbCOsdxhSN5_`&dPs-AD9b3PB7+hVc
zPTz4G188-3*k{}<>0=M8vmdSUncf9C7UyTUnxFvx!<{WtUZ<Y#F4rp@Kj7ijzO%_!
zEy$VZ*bsxwBSlE!7wX-7<c!cWsQkp-a&-FpKk;Oi0&qT~%S{_RoN3ll*M<8-Lk<K>
z<K}*CKe$B(@}H9I6n@?!E(kV!u|qZulcy7SelNDjM>-gBTQ#97ik~A^Q9<Di5%QM6
zbC7g8zH%B>e_xzXHwH<=ZtyH$CqO2}uc<)hrF_Tu({9zilj`+}-tEq}?%o?$3XH&q
zjz0w=*wh){ejEc`yCo3aun9IF51VvV`6Gw6XyJ88?ME?7iI8vI31krQR4OwIM^f)^
zOsKz$zPGS_@GB?Pav*|Lvrd!McCa>l1wl%DH41gK`=GnXs6u<RSl`J9dAyJ25LSP2
zBzNsr2kuCI=a)9+`Ipgy>4;yaMV5RHa>{uTtXcB=Iz7%mB|J{``0cs|G6Fgmd-Ykq
zE9DG4JSoSZzK+oTZ4mR7WvTs+)<+rSTlRs(R9)Rs>_bT(=y|-tsJ!-h=OiG{?uo(n
z!#mPtExU$oH8T}Vt;HA!uU+HMV}tFlM;3n4Rn=3L@v2o$?&!FqO?v1k<hB(SZ<PC3
zD)#Udas9^$-t{Bqa{;9$I^NL~`;?ufz9k+cAl6(g%ar>-5Xh5%?QwhdGY;8gK=XUA
zB{AJn=kVdeU%8zeH6`fbq@C-m?-GNJ(u5qw-Jsz)iy3wU^e(+@5T{-eQql)PO9|GF
z1pPh}-=Yh&yD4{9m45wf>)}D8<dp~R$o7<;=`t~_)2j)ZphD^RB=z{57L&3NOWr$+
zE+2XSU=N%Ph-a|vflm&EUb!uZeeJN65|3DGVF?a|&tBN`eVu5(<GpT+0v*H6w`aYz
z53(2B0U2_DDd7Go!PN+B;c5X-+W~#v=UB$SreUf|Kmwj}*nj&)(ey6);YmozeE%m2
zRd@=&own^*dfnBVH&{(gO*QM?*bf(Cv#gR82fpvloSS4?bjPT6O+!O_5_sibhkEJw
z$BA&{$;Q3@9pd2aM0n3=JcVj20^1pA=w7y{lB`u|DiG__=vi3|z<o#8#>&4EC+v>C
z8BaVjLoKPM)FKSmPZ_t5Zl(9>t&Zk#IW;}#@kUD{?38EDaAlyQRW?lrvr;8OPC2>z
z`k{0@D%q;3rrRU#{@pRXSvs3di(s&BIbIyBOg&Xt7xUu9bh*oSw38kab#}th{?j~8
z29e5GA9r-z?#|K?j!2=to}8SV5mclH4N<)I8{jcO^i?O59SwvN5Z5wG)_5ML@0v^b
zIPFA<ueG<eDVDmUs1Y~$^3nrq#Vct5#gIgTU&j!Jf*8D^K_t%!P~O!;Y~xy@J{EQ2
zhm)d<d6o)|X;ppIcVD8d1Z}Z#FqwvN?*Ql2D#IIUYn2n$L9?wmfL_avzf_M-NRKdZ
zF5cm9QKwHrW5UlFSg+9ugab1#adz@dDl?ezM5p|79XN-Hnh^OkDCok+vkpMg0-K=7
zKoB0pONItCbM7pi-?Qw}F7+>~EHBhUe49M9JPKetj>l`bfJx9S1VHwK?r<xKQ?-_4
zb};RSf|dJ6xUzPrVu2c)LYsvIv}{_`dkRn+tGR(L2VfDVhwam^#UU$(N8Z7Qt*XOr
zm>=bBp~w84`_E!<ybdCmQtki$?0O6X@RuX^R`?P(32PMr`1^nIwb?t)8wN>h<5d$2
zWu7zQvBI?c<>JC}!XB#;8U>!ko?Bt2Jk}ecOM<w6x?8IZ>M*=zCIUEH1cyVrm`}=8
zM&>0n$FUg!KM|Ff!yN~-uM6~qHqi2yTCMAKrb3M6ic$dFycnUdLM&{ba=sp5vj<IN
zKXx<OBAP>|xMPn&Wd7@0O3fw%Aua1A<V=?Dp=$(d_XuR;=iHp-T(;_{S6UPYEEEqP
zzrGL+sPNY-Ofx1EcyppSpK1nO??rXVhn}(OSKEjGYztBT9OPNcS;E}@ks%VGUERr^
z)9irm77hpYbk;ay!NxH~`Zezyl_%o2aDyu%_|uLlDJ!JPUt2~GW+|~Iwf!CX6)=$J
zZe$jcW1mwC`X0RDbJ~qsn+cF4p6`PMFp6`oPgF&h&3#kusppU2wI<aqbB(U_&94e9
zfAMpFnilMi9)36^eu#m3@2vlb;LrgJ1)Mcn^d>yLtDXdEdnYUGGUL7PN4q;<qqTJK
zYfiJk>e}H!hQ@VzdQLj8eYAvRQ=(|w*lQrrcE9{J$Ko_CYQ=Etp<|S`dQEhNb)PWm
zfyI{ON`F%_^wu8S5uFh#5nj@C@E&VQ?#J)+0MrVAS|7Kb_Ivmy$=WnRel2+Kjh*-2
zVexee#@lu}T(MN$F<mF#6&DDicJ*2|zaT2j&m5z-vpkuX(KucZnp8TdLk%%93)(sV
za3ZN)a-jOK(3m+?^dzj(al(k6G#DyIH;-;~FVN|DznRmuO~tWrN+y?Z$mB0LJ|Ehb
z%->omC2{j2hzff&B{cYN&nr?U2{;Z*daO@cjSFwT*q7Nsx*rpDzjR_tnDreFIA;cO
zrW9xD*1s9o8(^-yE-lx@JCUC4eEp%#|KwM@6s1YK{ddsm@oxBJ9rV^qO;%;4(2Wv7
zsnMe51nQlWisXeDea8oRT#)8rRVzIy4;!1@lcNcqA+#YUk0!A71)iwc3=3xR>BoHC
z9IHUprR09bWs(0#Z`BwSEu0~BrcOc~_lqguZ0!AvpC>IZpo5(r?>$%nCs0>-O!*8!
zr<;w9BZV{aARp)+h7sgHjeJFfgGr^~jPftJ7DeII%)XoI`=!nS|4(k*p>V+tHDleG
zXXkL<Li+`rrp@+hAAbr0!;ErgCFTgo82Rd^uMppG9vwK@1}1O(FTdmcM3Y9X*rlW$
zcgZ2k%B2bLD`M($f?nunkqz=*D9YERS7fsv$^WzssUfk|jy=}knW|{_mXOR-SKh*c
z0(~oR3Tf-}DL4BYpTqc9p$~skejYtQGI~#KbxL>;4o_xoIy;ATt{WONo%Xe5j%O5m
z&j8D(%39feZRR3Dbe-?eKnD$!-@SS6zG4=cl5Wd0l&unBDxEP8$f+J+%4CydVVB-<
zch~dNr@gYd<CKh)lyijzxC5i>v{g~yr{jh4S`K{1)8N>m#$6x}P|i}KT2~xw)TI=1
zTUK8gX((CtCH@m+HvnAn4Ca}TY*EL<m?2}h61w418a$i9hw1xrOaf<iw5Pvv)UXke
z$`%9Z*ZJMzIE|Ygd8|#cU*td!%-i)5<28!O<DrR+m`|<K+@3)LCe4QJYCLv(^ib?v
zL^`83vVPi8qvjKhvl@_~SC&^7Wj!sR<~d6wTKw`PS>n7swa@_*ougM3wY9|!McrJd
zMfo1upf@=6YaAk{{f-k&PTu;sud6DQb(n3h3(Q%J?+;nN8A*95w1rf<`iIMeApz{k
z<h@rQ-7<4!+Sf0aN`W9gM7%1e(KSnHd*jWIyM#K4rKQ{)%M1{|qvpFsdNuq8*H$Ii
zeJHFRKMqr5j~Dh%zsj(eO;oz821E~0Fv7@h<dw&PzEejjY9?w5wim~^Zz_$iJSTTe
zHTm`E5%`&BzyKNki}cqCZZXvkDKSQ3CB@Pb3MvU(RhX&`%wVaDR>k{j=+BqGTy@@F
zN3Jh(-QL{`F>gLG7?&6tn+(iuZ$9tL@zl2X!-E6eZV;Ak^E15Nyq5G4ZT%F8)`~dC
zg(-7iUXfT2j<!v%a-ThFTq#p4rr1k1e)Q;3M4>Cdvxq8!Y>%f`6rT>l;(%R3u{>R?
z@pxYA9tMMm0_T-M)`4LB^{4_MA%T6D*P~fkCAj;0*x|=ly!PFjh4f`wAb6NBeISlx
zmaGT^6Guqo!5uZ2&zGgBAZSrejgCs54Y?91A%cA8_mZ0Ak|eEfXd7evGk1Q63ib;`
zhPQHF5=}hdHTZ_3OLg!C>ikJ6C5ZtB!amDQ@-GL*!uAC6%m)3W_5WxdVL?FHAr|cU
z&DH-9;g%`Da)a6$_D@kjp_#z;e+mw1#U%$Ocdh|g_WxB)1K9=w8@ppwb~WB>V+}gM
z*^wl-HkBkgh6<?*gn!FrGW4fQlW~&$AGp400<hkP)2&m;_t^=6^&~NvHo!Vr)x|Z`
zeGub@<<@;06nt!INnx)-s9`et0GIo1Zc72k^1$u|AgIs;a^1?X+$?6`@$ZS{fgueJ
z{lBR!om_zYsKdm3jb-<IPdx8pnZIA<GUh|#!_Gk5073L>%NTS?X2}>h<HG5Autibl
zwi02Zevm(6*W(s@rI4biU}sdmJ+2<WUHceSgHV@0Bi*QYA;}8sRZ?M--5?|+3<HQA
z^TpEPwd#rRaL^0ENA>E9u^#U;h2b3Tgy19pgW20-OU7NrQw^5Lo)x560-tU9`y-pm
zLcOyB%-WRB#(j-PF(>6ukf{<*z*fZ1uTI~TtDf&CTE;+(Z(l6k*73+xfIoO|8IyH<
zWDr>huB+&AJNq-!W<TIy(qMBM8NGyFaV<dnu=pG#tC=C^K2&a<x_O`C2SvHZh^uay
zeO^zhfPS`0ven{B>cgVcn2T%$V1!9ScU6+^txr^kr==B~;tw^Yf;C>?cPw5*TP{`i
zUW8D}FeVWXm5)pkj<4Ml02Nu!^P36|l<nT1B+ZBenEO@1A73+v9pdauY=u23bZr*h
zw&Cgow#X}=k3CZR`b`NC1O}UpnL3k2YHTh3a?_-1#hP^yGSpo6BXiXFhxk5NUgTol
zJK0F#s^_C&_`9h$)<2OE5ryB@c+uPFu1)t|yz(loXh#pw0-e}Te|x_U1VXQ4ip*0&
zi}V&YrT`n9Wng<)L7YRfFM>6sLZ|Tp{<t`vY^Azf%N6mkVRHhw)e&ZuT?^o6<5f(t
z6C^jB!CJ$_vy?G!ww$34@)wH<@U0%SCX7dv-T>%6DWhnV^Yy=3f>$!2rWtv5*l^>d
zFh2$oNOqm-!cJb)tbsDX;um!x2P)4-<r_W<*gu|`kLgR|*U#2l;dDsxzi;ZUTlKuE
zE^Rm^H?S_d+NKG%GMLp{x>!3Q3lTR&SQUwN0V4E8rvQhN)uR}N={~}(iI>|Fxb*pA
zv0tRKaB}t#XDfF?M%z*{B+iDjJ`1_dhh4x3Fy=toNzFs!b+<6hmIs$WUNP8XeSR}C
zpu0s%I#cHDPaxIR)lv=SNBMp4{~W<9uSU!3n50+)@Q){7Mz}9DJK(So3fOtya1VZu
z&pdmG<J2Vn1W-jlC3~yp+e6kpNnD#BZ~CjY>OXX{%C4#alUBiI*Oegd=;ynosgZhB
zXr&5jb;YKW!}&xPbJhNmz;l#&dz`JXI@-q2@GkegexoaWzk5gMl_d$^ttyq?kpfO7
z&FTX&U!>qhwQD(Vg+aN$DIXB@0a=oD?7g={PwY~IN2I%*wo>tgBXra|U5eSe+(^v(
z$DwuaY45K8@;GnmlL2G?Yow$e)2FO?!Yay%Ex__%;o-SHR9U8R3kbam0zgVM_#uMo
zHeAvyFs((BNa?O1s($WU0JAEcfGZKQL|6Xt<9C7Sd)a>vQf;vU8l<ss!Ws#V5lbm-
zpHa8kw@xLIr!z!PRg2<xi0<$L=;wO@D-r;-UP{{7yzxCe%+bs<YqMKiEutZrc4_Ay
zivI%xaES}~vQ@*1iDFAKP^1vcfJreLNC>&}I#mGS8Hg+ZAk~J17}HyMT>lp;09lx@
zAF-e?pmqr|%@=BBNNbPUA8vC|yjKVS0X6jO<8S}Pomm<HJp5ha#uP6tohSgy7-m_K
zKdry$!pVh#3L)hc`Hv+RU^(rYX~Xs}hQW<58sBDW#dc}gC<|EXf4s3S1Nv}5w_P_T
z>-fO3?szgdI5<7HBp1~N_5d~Z(R)_ElYC8L(U)SVmLz!F#l?lTiR&Ri<OoRV!+;}O
z*VB%Xw=LBH50G5JDK@D4**|?90PBMkNqhT3dLZI_`SRuK59fnv(sKEg`)N#ze1d(6
z0#5bCvC+Q)^xuO9EoeMG?$FRsHp%^Z=A|=yJH00+CTYh4J=DLOZ2<VvQ1GTyi@=p-
zvHjk;glSk?P2O*17HH}%O2YcGwr9lHctCt_=}!De?eJTv-}1x;U*Fx=!8#7Tbgl;A
zB1U&X8{p8_UzmqC1DJk%%mF{WJnXo2512ur!t{KXrx$@Njj;dpl&a;7`Omz#7`-T9
z^yC>x>0Vq`unAOfc1CP+e(7*gCBWesqy!(N{v=MoBmvrn;}#HbrS$xtW&k@itUwsn
z2!8SHZ^M8x4;p|9nwxRH2VBmD(2G-pxvf&>mzl(gAyC1LG4`6oWv}Ef4h|0gNPBQu
z!5P3%H#SSK_LwfGX$Ih0u~p~(o0k;?&;S+upLJWyId;U=0l~XSZt072&5E*WGR2Qf
Gg8m2L2BXjb

literal 0
HcmV?d00001

diff --git a/client/web/compose/src/assets/PageBlocks/index.js b/client/web/compose/src/assets/PageBlocks/index.js
index 25e00db23..5cbb221c9 100644
--- a/client/web/compose/src/assets/PageBlocks/index.js
+++ b/client/web/compose/src/assets/PageBlocks/index.js
@@ -15,3 +15,4 @@ export const Report = require('./Report.png')
 export const Progress = require('./Progress.png')
 export const Nylas = require('./Nylas.jpg')
 export const Geometry = require('./Geometry.png')
+export const Navigation = require('./Navigation.png')
diff --git a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
index 6638dd148..ca4a8aaff 100644
--- a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
+++ b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
@@ -149,6 +149,11 @@ export default {
           block: new compose.PageBlockGeometry(),
           image: images.Geometry,
         },
+        {
+          label: this.$t('navigation.label'),
+          block: new compose.PageBlockNavigation(),
+          image: images.Navigation,
+        },
       ],
     }
   },
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Base.vue b/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
new file mode 100644
index 000000000..d4941f45c
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
@@ -0,0 +1,158 @@
+<template>
+  <wrap
+    :scrollable-body="false"
+    v-bind="$props"
+    v-on="$listeners"
+  >
+    <div class="h-100 w-100 card overflow-hidden bg-transparent">
+      <b-nav
+        :tabs="options.display.appearance === 'tabs'"
+        :pills="options.display.appearance === 'pills'"
+        :small="options.display.appearance === 'small'"
+        :fill="options.display.fillJustify === 'fill'"
+        :justify="options.display.fillJustify === 'justify'"
+        :align="options.display.alignment"
+        class="border-0 h-100"
+      >
+        <b-nav-item
+          v-for="(navItem, index) in options.navigationItems"
+          :key="`navItem-${index}`"
+          :disabled="!navItem.options.enabled"
+          :style="{ order: index, color: navItem.options.textColor, background: navItem.options.backgroundColor, justifyContent: options.display.alignment }"
+          :link-attrs="{ style: `color: ${navItem.options.textColor}` }"
+          :target="selectTargetOption(navItem.options.item.target)"
+          :href="redirectForNavItem(navItem)"
+          class="d-flex align-items-center"
+        >
+          <template v-if="navItem.type === 'dropdown' || isComposeDropdownPage(navItem)">
+            <b-button
+              :id="`dropdown-popover-${index}-${block.blockID}`"
+              class="text-decoration-none"
+              variant="link"
+              :style="{ color: navItem.options.textColor, background: navItem.options.backgroundColor }"
+            >
+              {{ displayDropdownText(navItem) }}
+              <span class="ml-1">
+                <font-awesome-icon
+                  :icon="['fas', 'chevron-down']"
+                  size="sm"
+                />
+              </span>
+            </b-button>
+
+            <b-popover
+              ref="dropdown-popover"
+              :target="`dropdown-popover-${index}-${block.blockID}`"
+              :placement="navItem.options.item.align"
+              delay="0"
+              boundary="window"
+              triggers="click blur"
+            >
+              <template
+                v-if="navItem.type === 'dropdown'"
+              >
+                <div
+                  v-for="(dropdown, dIndex) in navItem.options.item.dropdown.items"
+                  :key="`dropdown-${dIndex}`"
+                >
+                  <a
+                    class="dropdown-item"
+                    :href="dropdown.url"
+                    :disabled="navItem.options.disabled"
+                    :target="selectTargetOption(dropdown.target)"
+                    :style="{ order: dIndex * 2 }"
+                  >
+                    {{ dropdown.label }}
+                  </a>
+
+                  <hr
+                    v-if="dropdown.delimiter"
+                    class="my-1"
+                    :style="{ order: dIndex + 1 }"
+                  >
+                </div>
+              </template>
+
+              <template v-else>
+                <div
+                  v-for="(dropdown, dIndex) in getSubPages(navItem.options.item.pageID)"
+                  :key="`dropdown-${dIndex}`"
+                >
+                  <b-link
+                    :to="{ name: 'page', params: { pageID: dropdown.pageID } }"
+                    :target="selectTargetOption(navItem.options.item.target)"
+                    :style="{ order: dIndex * 2 }"
+                    :disabled="navItem.options.disabled"
+                    class="dropdown-item"
+                    style="white-space: normal"
+                  >
+                    {{ dropdown.title }}
+                  </b-link>
+                </div>
+              </template>
+            </b-popover>
+          </template>
+
+          <template v-else>
+            {{ navItem.options.item.label }}
+          </template>
+        </b-nav-item>
+      </b-nav>
+    </div>
+  </wrap>
+</template>
+<script>
+import { NoID } from '@cortezaproject/corteza-js'
+import { mapGetters } from 'vuex'
+import base from '../base'
+
+export default {
+  extends: base,
+
+  computed: {
+    ...mapGetters({
+      pages: 'page/set',
+    }),
+  },
+
+  methods: {
+    isComposeDropdownPage (navItem) {
+      return (navItem.type === 'compose' && navItem.options.item.displaySubPages)
+    },
+
+    getSubPages (selfID) {
+      return this.pages.filter(value => value.selfID === selfID && value.moduleID === NoID) || []
+    },
+
+    selectTargetOption (target) {
+      switch (target) {
+        case 'sameTab':
+          return '_self'
+        case 'newTab':
+          return '_blank'
+      }
+    },
+
+    displayDropdownText (navItem) {
+      if (navItem.type === 'dropdown') {
+        return navItem.options.item.dropdown.label
+      }
+
+      return navItem.options.item.label
+    },
+
+    redirectForNavItem (navItem) {
+      if (navItem.type === 'dropdown' || this.isComposeDropdownPage(navItem)) {
+        return
+      } else if (navItem.type === 'compose') {
+        const slug = this.$route.params.slug
+        const pageID = navItem.options.item.pageID
+
+        return `ns/${slug}/pages/${pageID}`
+      }
+
+      return navItem.options.item.url
+    },
+  },
+}
+</script>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
new file mode 100644
index 000000000..f12c9e902
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -0,0 +1,274 @@
+<template>
+  <div>
+    <b-tab :title="$t('navigation.label')">
+      <div class="mb-3">
+        <h5 class="text-primary">
+          {{ $t("navigation.displayOptions") }}
+        </h5>
+
+        <b-row class="justify-content-between">
+          <b-col
+            cols="12"
+            sm="4"
+            class="mb-2 mb-sm-0"
+          >
+            <b-form-group
+              horizontal
+              :label="$t('navigation.appearance')"
+            >
+              <b-form-radio-group
+                v-model="options.display.appearance"
+                buttons
+                button-variant="outline-secondary"
+                :options="appearanceOptions"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            sm="4"
+            class="mb-2 mb-sm-0"
+          >
+            <b-form-group
+              horizontal
+              :label="$t('navigation.fillJustify')"
+            >
+              <b-form-radio-group
+                v-model="options.display.fillJustify"
+                buttons
+                button-variant="outline-secondary"
+
+                :options="fillJustifyOptions"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            sm="4"
+            class="mb-2 mb-sm-0"
+          >
+            <b-form-group
+              horizontal
+              :label="$t('navigation.alignment')"
+            >
+              <b-form-radio-group
+                v-model="options.display.alignment"
+                buttons
+                button-variant="outline-secondary"
+                :options="alignmentOptions"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </div>
+
+      <div class="mb-3 mt-2">
+        <div class="d-flex align-items-center mb-4">
+          <h5 class="text-primary mb-0">
+            {{ $t("navigation.navigationItems") }}
+          </h5>
+
+          <b-button
+            variant="link"
+            class="d-flex align-items-center text-decoration-none"
+            @click="addNavigationItem"
+          >
+            <font-awesome-icon
+              :icon="['fas', 'plus']"
+              size="sm"
+              class="mr-1"
+            />
+            {{ $t("navigation.add") }}
+          </b-button>
+        </div>
+
+        <div class="mt-3">
+          <draggable
+            v-model="block.options.navigationItems"
+            group="sort"
+            handle=".grab"
+          >
+            <div
+              v-for="(item, index) in block.options.navigationItems"
+              :key="index"
+            >
+              <hr v-if="index">
+
+              <b-table-simple
+                borderless
+              >
+                <thead>
+                  <tr>
+                    <th style="width: auto" />
+                    <th>
+                      {{ $t("navigation.type") }}
+                    </th>
+                    <th>
+                      {{ $t("navigation.color") }}
+                    </th>
+                    <th>
+                      {{ $t("navigation.background") }}
+                    </th>
+                    <th class="text-center">
+                      {{ $t("navigation.enabled") }}
+                    </th>
+                    <th style="width: auto;min-width: 100px" />
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="align-middle">
+                      <font-awesome-icon
+                        :icon="['fas', 'bars']"
+                        class="grab text-grey"
+                      />
+                    </td>
+                    <td class="align-middle">
+                      <b-form-select
+                        v-model="item.type"
+                        :options="navigationItemTypes"
+                      />
+                    </td>
+                    <td class="align-middle">
+                      <b-form-input
+                        v-model="item.options.textColor"
+                        type="color"
+                        debounce="300"
+                        class="w-100"
+                      />
+                    </td>
+                    <td class="align-middle">
+                      <b-form-input
+                        v-model="item.options.backgroundColor"
+                        type="color"
+                        debounce="300"
+                        class="w-100"
+                      />
+                    </td>
+                    <td class="align-middle text-center">
+                      <b-form-checkbox
+                        v-model="item.options.enabled"
+                        switch
+                        class="mb-0"
+                      />
+                    </td>
+                    <td class="align-middle">
+                      <c-input-confirm
+                        button-class="px-2"
+                        size="md"
+                        @confirmed="options.navigationItems.splice(index, 1)"
+                      />
+                    </td>
+                  </tr>
+
+                  <component
+                    :is="item.type"
+                    :item="item"
+                    :namespace="namespace"
+                    @update="(value) => item = value"
+                  />
+                </tbody>
+              </b-table-simple>
+            </div>
+          </draggable>
+        </div>
+      </div>
+    </b-tab>
+  </div>
+</template>
+
+<script>
+import base from '../base'
+import Draggable from 'vuedraggable'
+import { compose } from '@cortezaproject/corteza-js'
+import Text from './NavTypes/Text.vue'
+import Url from './NavTypes/Url.vue'
+import Compose from './NavTypes/ComposePage.vue'
+import Dropdown from './NavTypes/Dropdown.vue'
+
+export default {
+  i18nOptions: {
+    namespaces: 'block',
+  },
+
+  components: {
+    Draggable,
+    TextSection: Text,
+    Url,
+    Compose,
+    Dropdown,
+  },
+
+  extends: base,
+
+  data () {
+    return {
+      appearanceOptions: [
+        { value: 'tabs', text: this.$t('navigation.tabs') },
+        { value: 'pills', text: this.$t('navigation.pills') },
+        { value: 'small', text: this.$t('navigation.small') },
+      ],
+
+      alignmentOptions: [
+        { value: 'left', text: this.$t('navigation.left') },
+        { value: 'center', text: this.$t('navigation.center') },
+        { value: 'right', text: this.$t('navigation.right') },
+      ],
+
+      fillJustifyOptions: [
+        { value: 'fill', text: this.$t('navigation.fill') },
+        { value: 'justify', text: this.$t('navigation.justify') },
+      ],
+
+      backgroundColors: [
+        { value: 'primary', text: this.$t('navigation.primary') },
+        { value: 'secondary', text: this.$t('navigation.secondary') },
+        { value: 'success', text: this.$t('navigation.success') },
+        { value: 'warning', text: this.$t('navigation.warning') },
+        { value: 'danger', text: this.$t('navigation.danger') },
+        { value: 'info', text: this.$t('navigation.info') },
+      ],
+
+      navigationItemTypes: [
+        { value: 'url', text: this.$t('navigation.url') },
+        { value: 'compose', text: this.$t('navigation.composePage') },
+        { value: 'dropdown', text: this.$t('navigation.dropdown') },
+        { value: 'text-section', text: this.$t('navigation.text') },
+      ],
+    }
+  },
+
+  methods: {
+    addNavigationItem () {
+      this.block.options.navigationItems.push(
+        compose.PageBlockNavigation.makeNavigationItem({
+          type: 'compose',
+          options: {
+            backgroundColor: '#ffffff',
+            item: {
+              align: 'bottom',
+              target: 'sameTab',
+              dropdown: {
+                label: '',
+                items: [],
+              },
+            },
+          },
+        }),
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+th {
+  width: 25%;
+}
+
+th,
+td {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+</style>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
new file mode 100644
index 000000000..10d3a2fc7
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -0,0 +1,115 @@
+<template>
+  <tr>
+    <td />
+    <td>
+      <b-form-group :label="$t('navigation.fieldLabel')">
+        <b-form-input
+          v-model="options.item.label"
+          type="text"
+        />
+      </b-form-group>
+    </td>
+    <td>
+      <b-form-group :label="$t('navigation.composePage')">
+        <vue-select
+          key="pageID"
+          v-model="options.item.pageID"
+          :placeholder="$t('navigation.none')"
+          :options="tree"
+          append-to-body
+          label="title"
+          :reduce="f => f.pageID"
+          option-value="pageID"
+          option-text="title"
+          class="bg-white"
+          @input="updateLabelValue"
+        />
+      </b-form-group>
+    </td>
+    <td>
+      <b-form-group :label="$t('navigation.openIn')">
+        <b-form-select
+          v-model="options.item.target"
+          :options="targetOptions"
+        />
+      </b-form-group>
+    </td>
+    <td
+      v-if="selectedPageChildren(options.item.pageID)"
+      cols="12"
+      sm="6"
+      class="align-middle text-center"
+    >
+      <b-form-group class="m-0">
+        <b-form-checkbox
+          v-model="options.item.displaySubPages"
+          switch
+          size="sm"
+        >
+          {{ $t('navigation.displaySubPages') }}
+        </b-form-checkbox>
+      </b-form-group>
+    </td>
+    <td />
+  </tr>
+</template>
+
+<script>
+import base from './base'
+
+import { VueSelect } from 'vue-select'
+import { compose } from '@cortezaproject/corteza-js'
+
+export default {
+  components: {
+    VueSelect,
+  },
+
+  extends: base,
+
+  props: {
+    namespace: {
+      type: compose.Namespace,
+      required: true,
+    },
+  },
+
+  data () {
+    return {
+      tree: [],
+      targetOptions: [
+        { value: 'sameTab', text: this.$t('navigation.sameTab') },
+        { value: 'newTab', text: this.$t('navigation.newTab') },
+      ],
+    }
+  },
+
+  created () {
+    this.loadTree()
+  },
+
+  methods: {
+    selectedPageChildren (pageID) {
+      const tree = this.tree ? this.tree.find(t => t.pageID === pageID) : {}
+      return tree && tree.children ? tree.children.length > 0 : false
+    },
+
+    loadTree () {
+      const { namespaceID } = this.namespace
+      this.$ComposeAPI
+        .pageTree({ namespaceID })
+        .then(tree => {
+          this.tree = tree.map(p => new compose.Page(p))
+        })
+        .catch(this.toastErrorHandler(this.$t('notification:page.loadFailed')))
+    },
+
+    updateLabelValue (pageID) {
+      if (!this.options.item.label) {
+        const composePage = this.tree.find(t => t.pageID === pageID)
+        this.options.item.label = composePage ? composePage.title : ''
+      }
+    },
+  },
+}
+</script>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
new file mode 100644
index 000000000..a6f7fc1de
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
@@ -0,0 +1,148 @@
+<template>
+  <tr>
+    <td />
+
+    <td
+      colspan="4"
+      class="p-0"
+    >
+      <div class="d-flex">
+        <th>
+          <b-form-group :label="$t('navigation.fieldLabel')">
+            <b-form-input
+              v-model="options.item.dropdown.label"
+              type="text"
+            />
+          </b-form-group>
+        </th>
+
+        <th>
+          <b-form-group
+            horizontal
+            :label="$t('navigation.drop')"
+          >
+            <b-form-radio-group
+              v-model="options.item.align"
+              buttons
+              button-variant="outline-secondary"
+              size="sm"
+              :options="aligns"
+            />
+          </b-form-group>
+        </th>
+      </div>
+
+      <div class="d-flex align-items-center mb-4 mb-3 px-3">
+        <h6 class="text-primary mb-0">
+          {{ $t("navigation.dropdownItems") }}
+        </h6>
+
+        <b-button
+          variant="link"
+          class="text-decoration-none"
+          @click="options.item.dropdown.items.push({ text: '', url: '', target: 'sameTab' })"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'plus']"
+            size="sm"
+            class="mr-1"
+          />
+          {{ $t("navigation.add") }}
+        </b-button>
+      </div>
+
+      <div class="px-3">
+        <table
+          v-if="options.item.dropdown.items.length > 0"
+          class="table table-sm table-borderless table-responsive-lg"
+        >
+          <tr>
+            <th>
+              {{ $t("navigation.text") }}
+            </th>
+            <th>
+              {{ $t("navigation.url") }}
+            </th>
+            <th class="text-center">
+              {{ $t('navigation.openIn') }}
+            </th>
+            <th class="text-center">
+              {{ $t("navigation.delimiter") }}
+            </th>
+          </tr>
+
+          <tr
+            v-for="(item, dropIndex) in options.item.dropdown.items"
+            :key="`drop-${dropIndex}`"
+          >
+            <th>
+              <b-form-group class="mb-0">
+                <b-form-input
+                  v-model="item.label"
+                  type="text"
+                />
+              </b-form-group>
+            </th>
+
+            <th>
+              <b-form-group class="mb-0">
+                <b-form-input
+                  v-model="item.url"
+                  type="text"
+                />
+              </b-form-group>
+            </th>
+
+            <th class="align-middle text-center">
+              <b-form-group class="mb-0">
+                <b-form-select
+                  v-model="item.target"
+                  :options="targetOptions"
+                />
+              </b-form-group>
+            </th>
+
+            <th class="align-middle text-center">
+              <b-form-group class="mb-0">
+                <b-form-checkbox
+                  v-model="item.delimiter"
+                  switch
+                  size="sm"
+                />
+              </b-form-group>
+            </th>
+
+            <th class="align-middle text-center">
+              <c-input-confirm
+                @confirmed="options.item.dropdown.items.splice(dropIndex, 1)"
+              />
+            </th>
+          </tr>
+        </table>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script>
+import base from './base'
+
+export default {
+  extends: base,
+
+  data () {
+    return {
+      aligns: [
+        { value: 'right', text: this.$t('navigation.right') },
+        { value: 'left', text: this.$t('navigation.left') },
+        { value: 'bottom', text: this.$t('navigation.bottom') },
+        { value: 'top', text: this.$t('navigation.top') },
+      ],
+      targetOptions: [
+        { value: 'sameTab', text: this.$t('navigation.sameTab') },
+        { value: 'newTab', text: this.$t('navigation.newTab') },
+      ],
+    }
+  },
+}
+</script>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Text.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Text.vue
new file mode 100644
index 000000000..4d890acf5
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Text.vue
@@ -0,0 +1,21 @@
+<template>
+  <tr>
+    <td />
+    <td>
+      <b-form-group :label="$t('navigation.fieldLabel')">
+        <b-form-input
+          v-model="options.item.label"
+          type="text"
+        />
+      </b-form-group>
+    </td>
+  </tr>
+</template>
+
+<script>
+import base from './base'
+
+export default {
+  extends: base,
+}
+</script>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Url.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Url.vue
new file mode 100644
index 000000000..0328bbed5
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Url.vue
@@ -0,0 +1,47 @@
+<template>
+  <tr>
+    <td />
+    <td>
+      <b-form-group :label="$t('navigation.fieldLabel')">
+        <b-form-input
+          v-model="options.item.label"
+          type="text"
+        />
+      </b-form-group>
+    </td>
+    <td>
+      <b-form-group :label="$t('navigation.url')">
+        <b-form-input
+          v-model="options.item.url"
+          type="text"
+        />
+      </b-form-group>
+    </td>
+    <td>
+      <b-form-group :label="$t('navigation.openIn')">
+        <b-form-select
+          v-model="options.item.target"
+          :options="openInType"
+        />
+      </b-form-group>
+    </td>
+  </tr>
+</template>
+
+<script>
+import base from './base'
+
+export default {
+  extends: base,
+
+  data () {
+    return {
+      value: {},
+      openInType: [
+        { value: 'sameTab', text: this.$t('navigation.sameTab') },
+        { value: 'newTab', text: this.$t('navigation.newTab') },
+      ],
+    }
+  },
+}
+</script>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/base.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/base.vue
new file mode 100644
index 000000000..5ba7783cf
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/base.vue
@@ -0,0 +1,25 @@
+<script>
+export default {
+  i18nOptions: {
+    namespaces: 'block',
+  },
+
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    options: {
+      get () {
+        return this.item.options
+      },
+      set (options) {
+        this.item.options = options
+      },
+    },
+  },
+}
+</script>
diff --git a/client/web/compose/src/components/PageBlocks/base.vue b/client/web/compose/src/components/PageBlocks/base.vue
index e1aedd1c2..7b0140421 100644
--- a/client/web/compose/src/components/PageBlocks/base.vue
+++ b/client/web/compose/src/components/PageBlocks/base.vue
@@ -75,7 +75,6 @@ export default {
       get () {
         return this.block.options
       },
-
       set (options) {
         this.block.options = options
       },
diff --git a/client/web/compose/src/components/PageBlocks/index.js b/client/web/compose/src/components/PageBlocks/index.js
index d71bb41d3..e4082b1d0 100644
--- a/client/web/compose/src/components/PageBlocks/index.js
+++ b/client/web/compose/src/components/PageBlocks/index.js
@@ -36,6 +36,8 @@ import NylasBase from './Nylas/NylasBase'
 import NylasConfigurator from './Nylas/NylasConfigurator'
 import GeometryBase from './GeometryBase'
 import GeometryConfigurator from './GeometryConfigurator/index'
+import NavigationConfigurator from './Navigation/Configurator'
+import NavigationBase from './Navigation/Base'
 
 /**
  * List of all known page block components
@@ -77,6 +79,8 @@ const Registry = {
   NylasConfigurator,
   GeometryBase,
   GeometryConfigurator,
+  NavigationConfigurator,
+  NavigationBase,
 }
 
 const defaultMode = 'Base'
diff --git a/lib/js/src/compose/types/page-block/index.ts b/lib/js/src/compose/types/page-block/index.ts
index c982059ea..c99b6789d 100644
--- a/lib/js/src/compose/types/page-block/index.ts
+++ b/lib/js/src/compose/types/page-block/index.ts
@@ -16,7 +16,7 @@ export { PageBlockReport } from './report'
 export { PageBlockProgress } from './progress'
 export { PageBlockNylas } from './nylas'
 export { PageBlockGeometry } from './geometry'
-
+export { PageBlockNavigation } from './navigation'
 
 export function PageBlockMaker<T extends PageBlock> (i: { kind: string }): T {
   const PageBlockTemp = Registry.get(i.kind)
diff --git a/lib/js/src/compose/types/page-block/navigation/index.ts b/lib/js/src/compose/types/page-block/navigation/index.ts
new file mode 100644
index 000000000..d68e9e9b2
--- /dev/null
+++ b/lib/js/src/compose/types/page-block/navigation/index.ts
@@ -0,0 +1,51 @@
+import { PageBlock, PageBlockInput, Registry } from '../base'
+import NavigationItem, { NavigationItemInput } from './navigation-item'
+
+const kind = 'Navigation'
+
+interface DisplayOptions {
+  appearance: string;
+  alignment: string;
+  fillJustify: string;
+}
+
+interface Options {
+  display: DisplayOptions;
+  navigationItems: NavigationItem[];
+}
+
+const defaults: Readonly<Options> = Object.freeze({
+  display: {
+    appearance: 'tabs',
+    alignment: 'center',
+    fillJustify: 'justify',
+  },
+  navigationItems: [],
+})
+
+export class PageBlockNavigation extends PageBlock {
+  readonly kind = kind;
+
+  options: Options = { ...defaults };
+
+  constructor (i?: PageBlockInput) {
+    super(i)
+    this.applyOptions(i?.options as Partial<Options>)
+  }
+
+  applyOptions (o?: Partial<Options>): void {
+    if (!o) return
+
+    this.options.navigationItems = (o.navigationItems || []).map(f => new NavigationItem(f))
+
+    if (o.display) {
+      this.options.display = o.display
+    }
+  }
+
+  static makeNavigationItem (item?: NavigationItemInput): NavigationItem {
+    return new NavigationItem(item)
+  }
+}
+
+Registry.set(kind, PageBlockNavigation)
diff --git a/lib/js/src/compose/types/page-block/navigation/navigation-item.ts b/lib/js/src/compose/types/page-block/navigation/navigation-item.ts
new file mode 100644
index 000000000..34ed75b10
--- /dev/null
+++ b/lib/js/src/compose/types/page-block/navigation/navigation-item.ts
@@ -0,0 +1,72 @@
+import { Apply } from '../../../../cast'
+
+interface DropdownItem {
+  label: string;
+  url: string;
+  delimiter: boolean;
+  target: string;
+}
+
+interface Dropdown {
+  label: string;
+  items: DropdownItem[]
+}
+
+interface ItemOptions {
+  label: string;
+  url: string;
+  target: string;
+  delimiter: boolean;
+  pageID: string;
+  displaySubPages: boolean;
+  dropdown: Dropdown;
+  align: string;
+}
+
+interface NavigationItemOptions {
+  enabled: boolean;
+  textColor: string;
+  backgroundColor: string;
+  item: ItemOptions;
+}
+
+export type NavigationItemInput = Partial<NavigationItem> | NavigationItem
+
+const defOptions = {
+  enabled: true,
+  textColor: '#0B344E',
+  backgroundColor: '',
+  item: {
+    label: '',
+    url: '',
+    target: '',
+    delimiter: false,
+    pageID: '',
+    displaySubPages: false,
+    align: 'bottom',
+    dropdown: {
+      label: "",
+      items: []
+    },
+  },
+}
+
+export default class NavigationItem {
+  public type = ''
+
+  public options: NavigationItemOptions = { ...defOptions }
+
+  constructor (i?: NavigationItemInput) {
+    this.apply(i)
+  }
+
+  apply (i?: NavigationItemInput): void {
+    if (!i) return
+
+    Apply(this, i, String, 'type')
+
+    if (i.options) {
+      this.options = { ...this.options, ...i.options }
+    }
+  }
+}
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index 4598f6877..ec388deac 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -505,6 +505,56 @@ comment:
     footnote: 'Field value will be used as reference'
 navigation:
   chart: Charts
+  label: Navigation
+  displayOptions: Display options
+  appearance: Appearance
+  alignment: Alignment
+  fillJustify: Fill and Justify
+  fieldLabel: Label
+  enabled: Enabled
+  openIn: Open in
+  navigationItems: Navigation items
+  type: Type
+  disabled: Disabled
+  color: Color
+  background: Background
+  url: URL
+  drop: Dropdown position
+  add: Add
+  composePage: Compose page
+  tabs: Tabs
+  pills: Pills
+  small: Small
+  center: Center
+  left: Left
+  right: Right
+  bottom: Bottom
+  top: Top
+  fill: Fill
+  justify: Justify
+  primary: Primary
+  secondary: Secondary
+  success: Success
+  warning: Warning
+  danger: Danger
+  info: Info
+  text: Text
+  dropdown: Dropdown
+  multi: Multiline
+  sameTab: Same tab
+  selectOpenInType: Select open in type
+  newTab: New tab
+  dropdownItems: Dropdown items
+  delimiter: Delimiter
+  none: None
+  displaySubPages: Display sub-pages
+  selectBackground: Select background
+  preview:
+    preview: Preview
+    label: Label
+    home: Home
+    dropdown: dropdown
+    about: about
 report:
   label: Report
   scenario: